1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| <!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
img {border:none; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
li {padding-bottom:6px; }
.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
.voile-noir {
position: fixed;
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.75;
background: gray;
z-index: 9999;
}
.popup-block{
position: fixed;
display: none;
top: 50%;
left: 50%;
padding: 20px;
z-index: 99999;
font-size: 1.2em;
background: #fff;
border: 20px solid #ddd;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
.popup-btn-close {
float: right;
margin: -55px -55px 0 0;
}
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<section class="conteneur">
<a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">Voir la pop-up - Width = 500px</a>
<!--
Il ne manque qu'une chose ( souvent oublié ) => les listes déroulante et objet flash passent au dessus ...
il faut utiliser une iframe en background ...
-->
<form style="display:block;width:300px;margin-left:500px;margin-top:100px;">
<select>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option selected="selected">Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
<option>Un mot pour remplir suffisament l'espace disponible</option>
</select>
</form>
</section>
<section class="popup-block">
<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/bomber.gif" alt="Lil bomb dude" style="float: right; margin: 50px 0 0 20px;" />
<h2>Popup #1</h2>
<p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
<p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
</section>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(function(){
$(".popup-light").click(function() {
var obj = $(this),
popupClass = obj.data("popupClass"),
popupWidth = obj.data("popupWidth"),
objPopup = $('.' + popupClass);
objPopup
.css("width", popupWidth)
.prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
.css({
// Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
// Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
"margin-top": -objPopup.outerHeight(true)/2,
"margin-left": -objPopup.outerWidth(true)/2
})
.fadeIn();
$("<div/>", {
"class":"voile-noir",
"css":{
"filter":"alpha(opacity=80)"
}
}).appendTo("body").fadeIn();
return false;
});
$("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
$('.voile-noir , .popup-block').fadeOut(function(){
$(".popup-btn-close, .voile-noir").remove();
});
return false;
});
});
</script>
</body>
</html> |
[Article] Créez une fenêtre modale avec CSS et jQuery
Créez une fenêtre modale avec CSS et jQuery.
Répondre avec citation
), elle fonctionne comme prévu dans IE9, Chrome 10 et Firefox 4.
Envoyé par Asli Bilal
sauf si je réactualise !
pourtant il n'ya pas de balise COLOR dans le code ci-dessous !]: 
Partager