Discussion :

[nico44530]

Bonjour,

J'ai une lightbox (au style de Facebook) qui s'ouvre quand on clique sur Connexion.
Lorsqu'on clique sur le lien submit, un delay de 2000 m/s s'enchaine avant de lancer le submit.

Jusque là j'espère que c'est compréhensible

Ensuite j'aimerais quand un visiteur clique sur le lien submit, que pendant le delay, s'il ferme la lightbox, le formulaire ne s’envoie plus, et que donc il ne soit pas redirigé.

Vous pouvez voir le script sur : www.web-astronomie.com (Site en contruction)

Je précise que tout est en Jquery et voici le code :

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
 
$(document).ready(function(){
			$('#load').hide(); //On cache l'image gif de chargement
            $("#loginbox").click(function () { 
				$("#dialog").fadeIn("fast"); //On ouvre la lightbox
            });
			$("#login").click(function () {
				$('#load').show(); //Au clic on affiche l'image gif
				setTimeout(function() {
					$('#form').submit(); //On envoie le formulaire au bout de 2 secondes
				}, 2000);
			});
            $("#close-dialog").click(function () {
				$("#dialog").fadeOut("fast"); //On ferme la lightbox
			});
});

Et voici le code du formulaire :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form method="post" action="login.php" class="form-login" name="form_login" id="form">
<table>
<tr><td><label class="form_login_label">Nom d'utilisateur</label></td></tr>
<tr><td><input type="text" name="pseudo" class="form_login_input" maxlength="23" /></td></tr>
<tr><td><label class="form_login_label">Mot de passe</label></td></tr>
<tr><td><input type="password" name="password" class="form_login_input" maxlength="30" /></td></tr>
<tr><td><input type="checkbox" id="checkbox" name="check" class="checkbox" /><label class="check" for="checkbox">Rester connecté</label><label class="mdp">|&nbsp; <a href="index.php">Mot de passe perdu</a></label></td></tr>
<tr><td><a href="#" name="Submit" title="Connexion" class="login" id="login"></a>
<a href="register.php" title="Inscription" class="register"></a><img src="../images/loading.gif" id="load" alt="" class="loading" /></td></tr>
<tr><td><? echo $reponse; ?></td></tr>
</table>
</form>

J'espère que quelqu'un pourra trouver une solution pour moi

[Bovino]

Il faut affecter ton setTimeout() a une variable :

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
$(document).ready(function(){
var timer;
			$('#load').hide(); //On cache l'image gif de chargement
            $("#loginbox").click(function () { 
				$("#dialog").fadeIn("fast"); //On ouvre la lightbox
            });
			$("#login").click(function () {
				$('#load').show(); //Au clic on affiche l'image gif
				timer = setTimeout(function() {
					$('#form').submit(); //On envoie le formulaire au bout de 2 secondes
				}, 2000);
			});
            $("#close-dialog").click(function () {
				$("#dialog").fadeOut("fast"); //On ferme la lightbox
if(timer) clearTimeout(timer);
			});
});

[nico44530]

Merci beaucoup

[nico44530]

Là c'est peut être un peu plus compliqué ce que je voudrais demander.

Toujours avec les codes ci-dessus, je souhaiterais un loading de ma lightbox avant son affichage, en Jquery si possible je pense que c'est faisable

Voici le code de la lightbox avec un div "loading-dialog" dans lequel il y aura le contenu du chargement.

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
 
	<div id="dialog">
		<div class="content-generic-dialog">
			<div class="generic-dialog" style="width: 400px; margin-top: 250px;">
				<div class="container-dialog">
					<h2 class="titre-dialog">
						<span>Connexion</span>
					</h2>
					<div class="content-dialog">
						<div class="body-dialog">
							<div id="form_login">
								<form method="post" action="login.php" class="form-login" name="form_login" id="form">
									<table>
										<tr><td><label class="form_login_label">Nom d'utilisateur</label></td></tr>
										<tr><td><input type="text" name="pseudo" class="form_login_input" maxlength="23" /></td></tr>
										<tr><td><label class="form_login_label">Mot de passe</label></td></tr>
										<tr><td><input type="password" name="password" class="form_login_input" maxlength="30" /></td></tr>
										<tr><td><input type="checkbox" id="checkbox" name="check" class="checkbox" /><label class="check" for="checkbox">Rester connecté</label><label class="mdp">|&nbsp; <a href="index.php">Mot de passe perdu</a></label></td></tr>
										<tr><td><a href="#" name="Submit" title="Connexion" class="login" id="login"></a>
										<a href="register.php" title="Inscription" class="register"></a><img src="../images/loading.gif" id="load" alt="" class="loading" /></td></tr>
										<tr><td><? echo $reponse; ?></td></tr>
									</table>
								</form>
							</div>
						</div>
						<div class="footer-dialog">
							<div>
								<a href="#" title="Fermer" id="close-dialog" class="close"></a>
							</div>
						</div>
						<div class="loading-dialog">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Merci d'avance