Скрываем всплывающее окно по клику снаружи
На многих сайтах используются различные всплывающие окошки с дополнительной информацией, или, скажем, с формами входа/регистрации.
Для закрытия окна, как правило служит иконка-крестик. Кроме этого, достаточно удобно бывает скрывать окошко просто по клику где-нибудь снаружи (т.е. в любой элемент сайта, кроме самого окошка).
Задача
Реализовать скрытие всплывающего окошка по клику вне его (будем использовать jQuery).
Далее по тексту подразумеваю, что окно описывается конструкцией
<div class="popup"> ... тут идет содержимое окна (в том числе какие-то вложенные элементы)... </div>
Решение 1. С помощью closest()
Окно должно закрываться при клике на любой элемент, кроме самого окна и всех его потомков.
Элемент, по которому кликнул пользователь, получаем с помощью e.target. После чего используем jQuery функцию closest(), чтобы узнать, не имеет ли этот элемент или кто-либо из его предков класс "popup". Если нет — скрываем окошко:
$("body").click(function(e) { if($(e.target).closest(".popup").length==0) $(".popup").css("display","none"); });
Смотрим демо-пример.
Проверено в:
- IE 7+
- Firefox
- Opera
- Chrome
- Safari
Решение 2. С помощью stopImmediatePropagation()
Можно пойти другим путем. Использование stopImmediatePropagation() не позволит выполнится обработчику события для body, если клик произошел на указанном элементе или его потомках (если точнее — предотвращает распространение события вверх по дереву DOM). Это как раз то, что нам нужно:
$("body").click(function(e) { $(".popup").css("display","none"); }); $(".popup").click(function(e) { e.stopImmediatePropagation(); });
Смотрим демо-пример.
Проверено в:
- IE 7+
- Firefox
- Opera
- Chrome
- Safari
Примечание
Если под окошко подкладывается полупрозрачный фон, затемняющий остальные элементы сайта, решение упрощается. Тогда скрипт скрытия окошка просто вешаем прямо на клик по этому фону.