Comment fermer div (modal) en cliquant à l'extérieur. Pinterest et Facebook façon
De la façon classique, c'est de faire un modal est une div avec le contenu (boîte de dialogue) et un div avec un z-index inférieur (overlay)
Ensuite, je peux lier l'événement click sur le recouvrir et cacher de dialogue de contenu.
<div class="dialog">...</div>
<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9)">
Mais j'ai remarqué que Pinterest et Facebook se combine à un div.
<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9);position: fixed; z-index: 9999;top: 0;right: 0;bottom: 0;left: 0;">
<div class="dialog" style="position: static;"></div>
</div>
Mais dans cette approche, comment puis-je lier l'événement click à proximité de dialogue que dans la superposition qui ont pas le dialogue?
OriginalL'auteur Luccas | 2012-04-28
Vous devez vous connecter pour publier un commentaire.
En faisant quelque chose comme ceci:
http://jsfiddle.net/mCupS/10/
événement.stopPropagation()
: Empêche l'évènement de remonter l'arborescence DOM, la prévention de tout parent gestionnaires informés de l'événement.stopPropagation()
est fortement déconseillée... css-tricks.com/dangers-stopping-event-propagationOriginalL'auteur Soufiane Hassou
stopPropagation
va arrêter la propagation de l'évènement de contrôles parent et vous n'obtiendrez pas de modèle, cliquez sur l'événement:Modifier, la meilleure façon d'atteindre le plus haut.
Il pourrait y avoir une meilleure façon, comme indiqué dans les commentaires au-dessus de la solution proposée comme discuté dans Les Dangers de l'Arrêt de la Propagation de l'Évènement. De cette façon vous pouvez vous assurer que l'intérieur de l'élément n'est pas en cours cliquez sur masquer.
Démonstration En Direct
vous êtes les bienvenus
stopPropagation()
est fortement déconseillée... css-tricks.com/dangers-stopping-event-propagationMerci @user664833.
OriginalL'auteur Adil