Как обнаружить клики вне мода мода?

Im использует очень простой и чистый код для рендеринга модала на моей странице:

<div class="modal">I'm the Modal Window!</div>

.modal {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    line-height: 200px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: #f1c40f;
    text-align: center;

    /* needed styles for the overlay */
    z-index: 10; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}

http://jsfiddle.net/c89Ls0av/

Есть ли чистый и надежный способ обнаружения, когда кто-то нажимает за пределы модального?

Ответы

Ответ 1

Вероятно, самый простой способ - связать событие click с телом и посмотреть, исходит ли он от элемента (e.target), у которого есть родительский элемент (подходите к дереву с помощью метода closest) .modal:

$(document).click(function(e) {
    if (!$(e.target).closest('.modal').length) {
        alert('click outside!');
    }
});

Демо: http://jsfiddle.net/c89Ls0av/4/

Кстати, наложение, сделанное с помощью outline, представляет собой интересную идею, но это не реальное наложение, поскольку оно все же позволяет взаимодействовать с основными элементами страницы. Вот пример наложения, сделанного с контейнером div, охватывающим всю страницу: http://jsfiddle.net/c89Ls0av/5/. Это предотвратит взаимодействие страниц при видимости модальности.

И вот пример того, как использовать функцию open/close вместе: http://jsfiddle.net/c89Ls0av/7/.

Ответ 2

С помощью фреймворка javascript это довольно просто.

Выполните следующие действия:

Прикрепите событие клика к документу, который закрывает или скрывает модальный.
Прикрепите отдельное событие клика к окну, которое останавливает распространение клика.

Пример:

$('html').click(function(){
    $('.modal').hide();
});
$('.modal').click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/c89Ls0av/3/

Предупреждение! Остановка распространения может привести к странному поведению

Ответ 3

WithOut jQuery

document.addEventListener('click', function (e) {
  if(e.target.className === 'modal'){
     alert('clicked in');
  }else {
    alert('clicked out');
  }
}, false);

проверить:
http://jsbin.com/totonopili/1/edit?html,css,js,output

Ответ 4

Ответ Dfsq будет работать нормально.. но если вы хотите что-то делать с диалоговыми окнами, вы можете посмотреть диалоговые окна jQuery ui. Это дает вам много вариантов с диалоговыми окнами, которые вы можете настроить в соответствии с вашими потребностями.

http://jqueryui.com/dialog/