clicker pour fermer une div

defacta · 04/07/2011, 15h11

Salut,

Voila, j'ai simplifié au max ma page pour vous la montrer:
http://boxfly.free.fr/test/login.html

Quand on clique sur --- Connexion -- cela affiche une div contenant des identifiants de connexion.
Pour la fermer il suffit de re-cliquer sur Connexion. J'aimerai qu'un clique n'importe ou sur la page (sauf dans cette div) me ferme cette div.
Je ne vois pas comment faire, quelqu'un aurait une idée ?

Merci,
Vincent.

vermine · 04/07/2011, 15h15

Bonjour,

Vous pouvez jouer avec le onclick du <body>.

defacta · 04/07/2011, 15h25

Citation:

Envoyé par vermine

Bonjour,

Vous pouvez jouer avec le onclick du <body>.

Le onClick du <body> fermer la div même si la souris est dans la div du menu d'authentification, or elle ne doit pas se fermer avec un click dans cette div...

vermine · 04/07/2011, 15h36

Oui, pardon. Vous devez gérer la propagation avec stopPropagation ou preventDefault mais j'avoue que je ne sais plus si c'est crossbrowser.

NoSmoking · 04/07/2011, 16h14

Bonjour,
la fonction associée au click sur le BODY doit tester qui à reçu l'événement, si c'est la DIV on ne fait rien sinon si elle est affichée on la masque.

defacta · 04/07/2011, 16h35

Citation:

Envoyé par NoSmoking

Bonjour,
la fonction associée au click sur le BODY doit tester qui à reçu l'événement, si c'est la DIV on ne fait rien sinon si elle est affichée on la masque.

Comment on peut savoir qui recoit l'évènement onClick ? parce que stopPropagation, ca a l'air bien compliqué...

Arekk · 04/07/2011, 18h19

Salut,

Déjà tu te simplifierais vraiment la tâche en utilisant la librairie jquery.
Cela te permettra de tout condenser et de simplifier à mort ton code.

2 conseils aussi :
Évite les tableaux quand tu peux (là sur un formulaire, tu peux je pense).
Mets tes styles dans une CSS , même si c'est juste en début de page. Regroupes les.

Ensuite pour ton histoire de click, toujours en jQuery tu peux utiliser la fonction :not (qui équivaut à un except "blabla")

En gros tu peux rendre ton clique avec un truc du genre :

Code :

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

1
2
3
4
5
6
7
8
$('#menuTD_1').click(function() {
  $('#tadiv').show;
  $("#tadiv").addClass("opened");
});
 
$('body :not(.opened)').click(function() {
  $('#tadiv').hide;
});

NoSmoking · 04/07/2011, 18h33

il faut utiliser target ou srcElement, un petit exemple au naturel

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
<html>
<head>
</head>
<body>
<p>petit texte</p>
<a href="page.html">petit lien</a>
<script type="text/javascript">
document.onclick = function(e){
  e = e || event;
  var oElem = e.target || e.srcElement;
  alert( oElem.tagName);
  if( oElem.tagName == 'A'){
    return false;
  }
}
</script>
</body>
</html>

04/07/2011, 15h11	#1
defacta Membre habitué Inscription : mai 2004 Messages : 383 Détails du profil Informations forums : Inscription : mai 2004 Messages : 383 Points : 129 Points : 129	clicker pour fermer une div Salut, Voila, j'ai simplifié au max ma page pour vous la montrer: http://boxfly.free.fr/test/login.html Quand on clique sur --- Connexion -- cela affiche une div contenant des identifiants de connexion. Pour la fermer il suffit de re-cliquer sur Connexion. J'aimerai qu'un clique n'importe ou sur la page (sauf dans cette div) me ferme cette div. Je ne vois pas comment faire, quelqu'un aurait une idée ? Merci, Vincent.
	00

04/07/2011, 15h15	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 756 Points : 5 756	Bonjour, Vous pouvez jouer avec le onclick du <body>. __________________ Elen Poukram - Isegoria - Sandawe
	00

04/07/2011, 15h36	#4
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 756 Points : 5 756	Oups Oui, pardon. Vous devez gérer la propagation avec stopPropagation ou preventDefault mais j'avoue que je ne sais plus si c'est crossbrowser. __________________ Elen Poukram - Isegoria - Sandawe
	00

04/07/2011, 16h14	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 772 Points : 4 772	Bonjour, la fonction associée au click sur le BODY doit tester qui à reçu l'événement, si c'est la DIV on ne fait rien sinon si elle est affichée on la masque.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email