La popup se ferme

**oussama_tr** · 16/10/2014, 05h06

Bonjour tout le monde ;

J'ai un problème et j ai besoin de votre aide... Quand j'appuie sur le bouton "send", ma popup jquery se ferme ! Peut-être est-ce dû à cause de l'événement "onclick". J'ai besoin que la fenêtre reste ouverte pour valider les champs.

Merci de votre aide. Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication23.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" href="css-js/StyleSheet1.css" rel="stylesheet" />
     <link rel="stylesheet" href="NewFolder1/Style.css" type="text/css" />
    <script type="text/javascript" src="css-js/jquey-1.7.1.min.js"></script>
     <script type="text/javascript" src="css-js/jquey-1.7.1.js"></script>
    <script type="text/javascript" src="css-js/jquery.validate.js"></script>
 
    <script type="text/javascript" src="NewFolder1/jquery.js"></script>
    <script type="text/javascript" src="NewFolder1/custom.js"></script>
 
 
 
     <script>       $("document").ready(function()
       {
           $("#thumb").click(function () {
               $("#ovelay").fadeIn("slow");
               $("#overlay_div").fadeIn("slow");
               
 
           });
           $(".close_button").click(function () {
               $("#overlay").fadeOut("fast");
               $("#overlay_div").fadeOut("fast");
                
           })
            
       });</script>
     <script type="text/javascript" src="css-js/validate.js"></script>
 
 
 
</head>
<body>
 
    <div>
 
        <img src="css-js/66.jpg" alt="" id="thumb"/></div>
       />
<div id ="overlay">
</div>
<div id = "overlay_div" style="background-color:#B5E655;opacity: 0.83;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 67);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 67);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*">
 
    <div>
 
 
       <div id="container" style="margin-top:30px ; margin-left:0px"">
      <h1> &nbsp;Contact Me</h1>
      <form id="contact_form" runat="server">
          <div>
              <label for="name" >Name</label>
              <input id="name" type="text" />
              <span id="nameinfo">what's your name?</span>
          </div>
 
 
          <div>
          <label for="pass2">Téléphone</label>
          <input id="pass2" name="pass2" type="password" />
              <span id="pass2info"></span>
              </div>
          <div>
          <div>
              <label for="email">E-mail</label>
              <input id="email" name="email" type="text" />
              <span id="emailinfo">so i can get back to you</span>
          </div>
 
 
 
                <label for="message">what's wanna tell me?</label>
          <textarea id="message" name="message" > </textarea>
 
          </div>
          <div>
              <asp:Button ID="send" runat="server" Text="send"   OnClick="send_Click" />
 
          </div>
      </form>
  </div>
 
    </div>
 
 
 
    <div id = "close_button" class= "close_button"> X </div>
</div>
 
 
 
 
 
</body>
</html>

**SpaceFrog** · 16/10/2014, 08h51

Si tu nous montrais plutôt le code html généré, et pas le code serveur ...

**danielhagnoul** · 16/10/2014, 10h42

Pour éviter l'action par défaut sur le clic, il faut ajouter un return false;.

**oussama_tr** · 16/10/2014, 14h13

j ai testé mais ça marché 1 seul fois apres ça retourne au même problème !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <script>       $("document").ready(function()
       {
           $("#thumb").click(function () {
               $("#ovelay").fadeIn("slow");
               $("#overlay_div").fadeIn("slow");
               return false;
 
           });
           $(".close_button").click(function () {
               $("#overlay").fadeOut("fast");
               $("#overlay_div").fadeOut("fast");
               return false;
           })
           return true;
 
 
       });</script>

**oussama_tr** · 16/10/2014, 14h15

Envoyé par SpaceFrog

Si tu nous montrais plutôt le code html généré, et pas le code serveur ...

c'est un code coté client en ASP.net si tu vois les balises html [Doctype Html]

**SpaceFrog** · 16/10/2014, 14h48

OUi sauf que jquery c'est du js qui s'execute coté client ...
et le cleint lui n'interprète QUE du html généré ...
Donc pour bien comprendre comment fonctionne ton code et comment le jquery doit inter agir avec il serait intéressant de voir ton code html généré !!!

**oussama_tr** · 16/10/2014, 15h04

voici tous le code ..
[page asp]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication23.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" href="css-js/StyleSheet1.css" rel="stylesheet" />
     <link rel="stylesheet" href="NewFolder1/Style.css" type="text/css" />
    <script type="text/javascript" src="css-js/jquey-1.7.1.min.js"></script>
     <script type="text/javascript" src="css-js/jquey-1.7.1.js"></script>
 
 
    <script type="text/javascript" src="NewFolder1/jquery.js"></script>
    <script type="text/javascript" src="NewFolder1/custom.js"></script>
 
 
 
       <script>       $("document").ready(function () {
           $("#thumb").click(function (e) {
               $("#ovelay").fadeIn("slow");
               $("#overlay_div").fadeIn("slow");
 
               return false
 
           });
           $(".close_button").click(function () {
               $("#overlay").fadeOut("fast");
 
               $("#overlay_div").fadeOut("fast");
               return false;
           })
           return false;
 
 
       });</script>
 
 
 
 
</head>
<body>
 
 
    <div>
 
        <img src="css-js/66.jpg" alt="" id="thumb"/></div>
       />
<div id ="overlay">
</div>
<div id = "overlay_div" style="background-color:#B5E655;opacity: 0.83;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 67);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 67);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*">
 
    <div>
 
 
       <div id="container" style="margin-top:30px ; margin-left:0px"">
      <h1> &nbsp;Contact Me</h1>
      <form id="contact_form" runat="server">
          <div>
              <label for="name" >Name</label>
              <input id="name" type="text" />
              <span id="nameinfo">what's your name?</span>
          </div>
 
 
          <div>
          <label for="pass2">Téléphone</label>
          <input id="pass2" name="pass2" type="password" />
              <span id="pass2info"></span>
              </div>
          <div>
          <div>
              <label for="email">E-mail</label>
              <input id="email" name="email" type="text" />
              <span id="emailinfo">so i can get back to you</span>
          </div>
 
 
 
                <label for="message">what's wanna tell me?</label>
          <textarea id="message" name="message" > </textarea>
 
          </div>
          <div>
 
  <asp:Button ID="send" runat="server" Text="send"  OnClientClick="send_Click" />  
 
          </div>
      </form>
  </div>
 
    </div>
 
 
 
    <div id = "close_button" class= "close_button"> X </div>
</div>
 
 
 
 
 
</body>
</html>

page [js Custom]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function(){
 
    var form = $("#contact_form");
    var name = $("#name");
    var nameDetails = $("#nameinfo");
    var email = $("#email");
    var emailDetails = $("#emailinfo");
    var pass1 = $("#pass1");
    var pass1Details = $("#pass1info");
    var pass2 = $("#pass2");
    var pass2Details = $("#pass2info");
    var message = $("#message");
 
 
 
    name.blur(validateName);
    email.blur(validateEmail);
    pass1.blur(validatePass1);
    pass2.blur(validatPass2);
    message.blur(validateMessage);
    name.keyup(validateName);
    email.keyup(validateEmail);
    pass1.keyup(validatePass1);
    pass2.keyup(validatPass2);
    message.keyup(validateMessage);
 
 
    form.submit(function(){
        if (validateName() & validateEmail() & validatePass1() & validatPass2() & validateMessage()){
            return true;
        } 
    else { return false ;
    }
 
 
    });
 
function validateName(){
    if (name.val().length < 5){
        name.addClass("error");
        nameDetails.text("votre nom doit etre plus de 5 caractére ");
        nameDetails.addClass("error");
        return false ;
    } 
    else{
        name.removeClass("error");
        nameDetails.text ("Votre Nom ");
        nameDetails.removeClass("error");
        return true;
 
    }
}
 
function validatePass1() {
    if (pass1.val().length < 2) {
        pass1.addClass("error");
        pass1Details.text("votre nom doit etre plus de 5 caractére ");
        pass1Details.addClass("error");
        return false;
    }
    else {
        pass1.removeClass("error");
        pass1Details.text("Votre Nom ");
        pass1Details.removeClass("error");
        return true;
 
    }
}
 
function validatPass2() {
    if (pass2.val().length < 6) {
        pass2.addClass("error");
        pass2Details.text("votre nom doit etre plus de 5 caractére ");
        pass2Details.addClass("error");
        return false;
    }
    else {
        pass2.removeClass("error");
        pass2Details.text("Votre Nom ");
        pass2Details.removeClass("error");
        return true;
 
    }
}
 
 
 
 
 
function validateEmail(){
    var a = $("#email").val();
    RegExp = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i;
 
 
    if (RegExp.test(a)) {
        email.removeClass("error");
        emailDetails.text("so i can get back to you");
        emailDetails.removeClass("error");
        return true;
    }
    else {
        email.addClass("error");
        emailDetails.text("Enter a valid email adresse");
        emailDetails.addClass("error");
    }
}
 
function validateMessage() {
if (message.val().length < 3) {
    message.addClass("error");
 
    return false;
}
else {
    message.removeClass("error");
 
    return true;
 
}
}
 
 
});

page [style css]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
body {
}
#thumb{
cursor:pointer;
}
img{
border:solid 1px #ccc;
padding :1px;
}
a{
text-decoration : none;
color: #444;
font-weight:bold;
}
#overlay{
width:100%;
height:100%;
background :#000;
position:fixed;
top:0;
bottom:0;
left:0;
opacity:0.9;
z-index:1000;
display:none;
}
#overlay_div{
width:600px;
height:450px;
margin:0 auto;
position: absolute;
top:10%;
right:20%;
bottom:10%;
left:20%;
z-index:1500;
box-shadow: 0 0 50px #000;
-o-box-shadow: 0 0 50px #000;
-moz-box-shadow: 0 0 50px #000;
-webkit-box-shadow: 0 0 50px #000;
-ms-box-shadow : 0 0 50px #000;
display:none;
opacity: 0.67;
 
 
}
#close_button{
cursor:pointer;
width:30px;
line-height:30px;
background:#000;
color:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
box-shadow:0 0 20px #777;
-moz-box-shadow: 0 0 20px #777;
position : absolute;
top : -10px;
right : -10px;
border:solid 1px #fff;
}
html,body,span,applet,objet,iframe,h2,h3,h4,h5,h6,p,pre,img,table,a,samp,span
tr,dt,ul,li,th,form,label{
    border:0px none;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    margin:0px;
    padding:0pt;
    vertical-align:baseline;
}
body {
    background: #fff;
    line-height:14px;
    font-size:12px;
    font-family:arial,Verdana,sans-serif;
    margin:0pt;
    cursor:default;
    overflow:hidden;
}
html.body{
    height:100%;
    text-align:center;
}
.clear{
    clear:both;
    height:0;
    visibility:hidden;
    display:block;
}
a{
    text-decoration:none;
}
strong{
    font-weight:700;
}
h1{
    font-weight:700;
    font-size:18px;
    line-height:1.2em;
    border-bottom:1px dotted #6566ed;
    color:#5f95ef;
    margin-bottom:0em;
}
#container{
    width:600px;
    margin:0px auto;
    text-align:left;
}
#contact_form{
    padding:0 10px 10px;}
#contact_form label{
    display:block;
    color:#797979;
    font-weight:700;
    line-height:1.4em;
}
#contact_form input{
    width:220px;
    padding:6px;
    color:#949494;
    font-family:Arial,Verdana,sans-serif;
    font-size:11px;
    border:1px solid #cecece;
}
#contact_form input.error{
    background:#f8dbdb;
    border-color:#e77776;
}
#contact_form textarea{width:550px;
                       height:80px;
                       padding:6px;
                       color:#adaeae;
}
#contact_form textarea.error{
    background:#f8dbdb;
    border-color:#e77776;
}
#contact_form div{
    margin-bottom:15px;
}
contact_form div span{
    margin-left:10px;
    color:#b1b1b1;
    font-size:11px;
    font-style:italic;
}
#contact_form div span.errror{
    color:#e46c6e;
}
#contact_form #send{
    background:#6f9ff1;
    color:#fff;
    font-weight:700;
    font-style:normal;
    border:0;
    cursor:pointer;
}
contact_form #send:hover{
    background:#79a7f1;
}
#error{
    margin-bottom : 20px;
    border:1px solid #efefef;
}
#error ul {
    list-style:square;
   padding:5px;
   font-size:11px;
}
#error ul li{
    list-style-position:inside;
    line-height:1.6em;
}
#error ul li strong{
    color:#e46c6d;
}
#error.valid ul li strong{
    color:#93d72e
}

jQuery JavaScript Library v1.6.1

**danielhagnoul** · 17/10/2014, 11h37

Bonjour

Plusieurs remarques.

Vous utilisez un jQuery (1.7.1) préhistorique et totalement obsolète. Voir : http://jquery.com/download/ et http://jqueryui.com/download/

HTML : votre tag "form" commence dans une "div" et se termine dans une autre.

JS : un return inutile, manque des ";"

Dans mon test, le fading se fait correctement, mais je n'ai pas le CSS.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!-- bouton créé pour le test -->
<button id="thumb">Thumb</button>
 
<div id ="overlay">
 
</div>
<div id = "overlay_div">
    <div>
        <div id="container" style="margin-top:30px ; margin-left:0px">
            <h1> &nbsp;Contact Me</h1>
            <form id="contact_form">
                <div>
                    <label for="name" >Name</label>
                    <input id="name" type="text" />
                    <span id="nameinfo">what's your name?</span>
                </div>
                <div>
                    <label for="pass2">Téléphone</label>
                    <input id="pass2" name="pass2" type="password" />
                    <span id="pass2info"></span>
                </div>
                <div>
                    <div>
                        <label for="email">E-mail</label>
                        <input id="email" name="email" type="text" />
                        <span id="emailinfo">so i can get back to you</span>
                    </div>
                    <label for="message">what's wanna tell me?</label>
                    <textarea id="message" name="message" > </textarea>
                </div>
                <div>
                    <button id="send">send</button>
                </div>
            </form>
        </div>
    </div>
    <div id="close_button" class="close_button">
        X
    </div>
</div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( function(){
 
    $( "#thumb" ).on( "click", function(){
        $( "#ovelay" ).fadeIn( "slow" );
        $( "#overlay_div" ).fadeIn( "slow" );
        return false;
    });
 
    $( ".close_button" ).on( "click", function(){
        $( "#overlay" ).fadeOut( "fast" );
        $( "#overlay_div" ).fadeOut( "fast" );
        return false;
    });
 
    function sendClick( event ){
        console.log( event.target );
    }
 
    $( "#send" ).on( "click", sendClick );
 
});

La popup se ferme

jQuery

Vue hybride

Discussions similaires

Partager

Partager