Si j'ai un popup (en utilisant un div), comment puis-je avoir la div pour revenir à l'état caché lorsque quelqu'un clique n'importe où en dehors de la div? Par exemple, la fenêtre contextuelle est visible, puis quelqu'un clique en dehors de la fenêtre contextuelle, la div doit à nouveau être masquée.popup retourne à l'état caché lorsque vous cliquez en dehors de la zone popup
Comment puis-je obtenir cette fonctionnalité?
Un moyen populaire de faire cela est avec une superposition. Lorsque votre div créer votre pop-up, créez également un <div id="overlay"> immédiatement au-dessous qui prend tout l'écran:
div#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
En option, vous pouvez utiliser cette superposition pour assombrir tous les autres contenus, par exemple, background: #000 et opacity: 0.5. Après avoir créé votre JavaScript pour ajouter cette superposition juste sous votre popup, ajoutez un écouteur de clic à celui-ci. Lorsque l'utilisateur clique sur la superposition, vous saurez qu'il a cliqué en dehors de votre popup.
Notez que position: fixed ne fonctionne pas dans les anciens navigateurs. Une solution de contournement est, lorsque l'incrustation est visible, à la place de définir l'incrustation à position: absolute, puis ajouter temporairement overflow: hidden à <body> pour empêcher l'utilisateur de faire défiler vers le bas.
Une autre façon de le faire qui semble plus direct pour moi, est la suivante:
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#popup").remove();
$("body").unbind("click");
}
});
En bref, le originalTarget est ce qui a été cliqué, et le script vérifie ensuite si #popup est l'un des ses ancêtres (appelés parents dans jQuery). Si ce n'est pas le cas, le clic était à l'extérieur, et nous supprimons le popup.
Cela ne fonctionnera pas si vous utilisez des iframes. – laktak
ahh, ok c'est comme ça que les gens le font. En fait, quand le popup yoru est visible, ajoutez les attributs à la div extérieure (overlay) pour le rendre grisâtre, attachez-y l'événement click. merci –