Чаще всего при создании модальных окон внутри них делают кнопку для их закрытия, например обычный крестик. Такой вариант отличный и его отбрасывать не стоит, можно даже в паре с ним использовать и метод с данной статьи. Пример того как это работает, можно посмотреть по ссылке ниже.
О том как сделать подобные окна, подробно мы останавливаться не будем. На моем сайте есть много статей на подобные темы. Пример нескольких из них:
- Модальное окно с помощью CSS и JavaScript
- Простое модальное окно с помощью css (Pop-up)
- Всплывающее модальное окно при загрузке сайта с задержкой
- Как выравнять модальное окно по центру
- Всплывающее, модальное окно на сайт в виде пузырьков с анимацией
Теперь подробнее о скрипте. Он работает на основе 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();
- Далее, просто закрываем скобки.
Если вы настроите все правильно то результат не заставит себя ждать.
На этом все, спасибо за внимание. 🙂
