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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Effet lightbox simple</title>
<meta name="Author" content="NoSmoking">
<style>
html,body{
position:relative;
font: 1em/1.5 Verdana, sans-serif;
background:#E6E6E1;
margin:0;
padding:0;
height:100%;
}
#page{
width:40em;
margin:0 auto;
padding-top:1em;
}
#page h1{
color:#006699;
text-shadow:1px 1px 0 #fff;
vertical-align:middle;
margin:0;
}
#page h1 img{
vertical-align:middle;
font-size: 0.5em;
margin:0 1em 0 0;
}
.btn_cde {
border:1px solid #BBF;
background:#EEE;
color:blue;
cursor:pointer;
line-height:2em;
margin:0.5em;
text-align:center;
width:10em;
}
.box_masquee {
display:none;
position:fixed;
width:25em;
top:15em;
left:50%;
margin-left:-13.5em;
padding:1em;
background:#FFF;
border-radius:5px;
border:1px solid #000;
box-shadow:0 10px 25px rgba(0,0,0,0.5);
text-align:center;
z-index:1001;
}
.btn_close{
position:absolute;
width:2em;
height:2em;
line-height:2em;
top:-1em;
right:-1em;
font: 700 1em/2 Verdana, sans-serif;
color:#FFF;
text-align:center;
background:#F00;
border-radius:50%;
border:5px solid #FFF;
box-shadow:0 10px 25px rgba(0,0,0,0.5);
cursor:pointer;
}
#overlay{
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#000;
opacity:0.5;
z-index:1000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(function($){
$('body').prepend('<div id="overlay"></div>');
$('.btn_cde').on('click', function(){
var idMsg = $(this).data('box');
$('#overlay').show();
$('#' +idMsg).toggle( 'slow', function(){
$(this).prepend('<div class="btn_close">X</div>');
});
});
$('body').on('click', '.btn_close', function() {
$(this).parent().toggle( 'fast' );
$('#overlay').hide();
$('.btn_close').remove();
});
});
</script>
</head>
<body>
<div id="page">
<h1><img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png">Effet lightBox simple</h1>
<button class="btn_cde" data-box="box_1">Modifier</button>
<button class="btn_cde" data-box="box_2">Supprimer</button>
<div id="box_1" class="box_masquee">
<form method="post">
<p><label for="adresse">Votre email</label></p>
<p><input id="adresse" type="email" size="20" name="email" required></p>
<p><input type="submit" value="Envoyer"></p>
</form>
</div>
<div id="box_2" class="box_masquee">
<p>Ceci est le contenu de la boîte Supprimer</p>
</div>
</div>
</body>
</html> |
Imbrication d'événements
Répondre avec citation
Mais il y a toujours mon problème de départ qui est que quand je met des champs input text dans cette "pop up", et que l'on effectue un clique dessus, la fonction détecte le click et aussi tot ferme cette "pop up" automatiquement. J'aimerais changer l'événement onclick par ondblclick pour devoir faire un double clique pour fermer la page ou lieu d'un seul. J'ai tenter plusieurs fois de modifier ce code, mais je n'y suis pas arriver.
Je vais arranger cela 
mais j'ai découvert la fonction pour envoyer les formulaire sans recharger la page il n'y a même pas une semaine donc je n'est pas encore découvert de quoi était capable ce langage (code trouver aussi sur internet ^^). Mais en tout cas je pense que se code buggera beaucoup moins que mon pop in précédent. Je le trouve très joli et je l'apprécie beaucoup plus que l'autre (il fait plus professionnel 
Envoyé par SylvainPV
Partager