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

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

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>

clicker pour fermer une div

JavaScript

Discussions similaires

Partager

Partager