Как закрыть модальное окно, нажав за пределами модального окна?

Question

В очень простом модале jQuery я закрываю модал, нажимая на ЗАКРЫТЬ как

$('#close').click(function(e) {
  e.preventDefault();
  $('#overlay, #alertModalOuter').fadeOut(400, function() {
     $(this).remove();
  });
});

Как я могу закрыть модальное, нажав ли кнопку ЗАКРЫТЬ (которая находится внутри модальных окон) ИЛИ щелкнув где-нибудь за пределами модального окна.

Answer 1

Изменение вашей функции так должно работать:

    $('#close, #overlay').click(function(e) {
      e.preventDefault();
      $('#overlay, #alertModalOuter').fadeOut(400, function() {
      $('#close').remove();
    });
});

Answer 2

Я считаю полезным включить:

$('.item-modal').click(function(e) {
  e.stopPropagation();
});

Answer 3

Добавьте тот же слушатель щелчка к своему наложению.

Answer 4

Я знаю, что этот вопрос относится к jQuery, но вот как я сделал это в Vue на моем модальном компоненте на случай, если кто-то сочтет это полезным. Мой модальный HTML в основном заимствован прямо из этого: https://vuejs.org/v2/examples/modal.html

Я поставил два @click атрибуты, один на самом внешнем модальном элементе (modal-mask) который называет мой close() метод (который излучает close событие для родительского компонента) и одно на фактическом элементе модального окна (modal-container) что с .stop модификатор события (@click.stop), чтобы щелчок не переходил вверх к родительскому элементу (modal-mask). Работает как шарм.