Главная/ Собираем HTML и CSS приемы/ Javascript: решения и плагины/ Ui/ Скрываем всплывающее окно по клику снаружи

Скрываем всплывающее окно по клику снаружи

Подготовил: Александр Фадеев
Дата публикации: 01.02.2015

На многих сайтах используются различные всплывающие окошки с дополнительной информацией, или, скажем, с формами входа/регистрации.

Для закрытия окна, как правило служит иконка-крестик. Кроме этого, достаточно удобно бывает скрывать окошко просто по клику где-нибудь снаружи (т.е. в любой элемент сайта, кроме самого окошка).

Задача

Реализовать скрытие всплывающего окошка по клику вне его (будем использовать 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

Примечание

Если под окошко подкладывается полупрозрачный фон, затемняющий остальные элементы сайта, решение упрощается. Тогда скрипт скрытия окошка просто вешаем прямо на клик по этому фону.

Показать комментарии