Закрытие элемента при клику за его пределами

Віталий

5 років ago

Доброго времени суток. 🙂

В этой статье хочу показать небольшой скрипт, который вам поможет закрывать модальные окна нажатием вне их области. Небольшая мелочь, но очень полезна при верстке сайтов с всплывающими окнами. Данный метод часто использую и я и надеюсь он поможет и вам.

Чаще всего при создании модальных окон внутри них делают кнопку для их закрытия, например обычный крестик. Такой вариант отличный и его отбрасывать не стоит, можно даже в паре с ним использовать и метод с данной статьи. Пример того как это работает, можно посмотреть по ссылке ниже.

О том как сделать подобные окна, подробно мы останавливаться не будем. На моем сайте есть много статей на подобные темы. Пример нескольких из них:

Теперь подробнее о скрипте. Он работает на основе jQuery,поэтому, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки нужно подключить наш скрипт. Метод подключения, тоже можете взять со статьи упомянутой выше. Выглядит скрипт так:

$(document).mouseup(function (e){
var modalctr = $("#modal_cinw_ctnr");
var modal = $(".modal_cinw");
if (!modal.is(e.target) && modal.has(e.target).length === 0){
modalctr.hide();
}
});

Скрипт имеет важные параметры, настройка которых нужна для корректной работы скрипта.

$(document).mouseup(function (e){ - эта строка определяет, что скрипт будет работать когда отпущена любая из стандартных клавиш мыши.
var modalctr = $("#modal_cinw_ctnr"); - создаем переменную. В данном случаи это родительский контейнер окна. В примере это затемненная область поверх сайта. Иногда такой области нет, все зависит от типа вашего окна или другого элемента который вы хотите скрыть по клику вне его области. #modal_cinw_ctnr - это айди нашего родительского контейнера. Меняйте на свой нужный.
var modal = $(".modal_cinw"); - создаем вторую переменную. Как раз эта переменная и является нашим окном, нажимая вне его области и будет скрываться именно оно. .modal_cinw - класс нашего окна. Вы можете менять на айди или класс, вашего элемента, что нужно скрыть.
if (!modal.is(e.target) && modal.has(e.target).length === 0){ - в этой строке мы определяем был ли совершен клик по нашему главному элементу, то бишь по окну или нет, а также по его дочерних элементах, что размещены внутри. Если это не они, то переходим далее.
modalctr.hide(); - скрываем наш родительский контейнер, первую переменную - modalctr. То бишь нажимая вне окна, мы скрываем область, что затемняет сайт, внутри которой и лежит окно. Если у вас нет родителя, а нужно скрыть просто элемент из переменной modal. То есть строка будет иметь такой вид - modal.hide();
Далее, просто закрываем скобки.

Если вы настроите все правильно то результат не заставит себя ждать.

На этом все, спасибо за внимание. 🙂

Exit mobile version