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
| <!DOCTYPE html>
<html lang="fr">
<head>
<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, .popup-block2 {
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>
<br/><br/>
<a href="#" class="popup-light" data-popup-class="popup-block2" data-popup-width="400px">Voir la pop-up - Width = 400px</a>
</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>
<section class="popup-block2">
<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 #2</h2>
<p>Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet.</p>
<p>Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor.</p>
</section>
<script src="http://code.jquery.com/jquery-1.8.2.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" ).on( "click", ".popup-btn-close, .voile-noir", function(){
$( "body" ).on( "click", ".popup-btn-close", function(){
$( ".voile-noir , [class^='popup-block']" ).fadeOut( function(){
$( ".popup-btn-close, .voile-noir" ).remove();
});
return false;
});
});
</script>
</body>
</html> |
