Функции вызова jQuery

Question

У меня возникла проблема с моей модальной структурой окна. У меня есть div, который вызывает функцию, когда нажимается, чтобы показать модальное окно. Внутри функции showModal() я вызываю другую функцию, которая действует как функция закрытия, если пользователь нажимает клавишу ESC или выходит из модального окна в любом месте документа.

Вот код:

$('body').on('click', '.container', function(){ 
    showModal(); 
}); 

По щелчку, это открывает ShowModal

function showModal(_this) { 
    $('body').addClass('video-open'); 
    $('.popup').load(templateDir + '/views/video.html', function() { 
    $(this).show(); 
    $('.cloaked').show(); 
}); 
closeModal('.modal-window'); 
} 

closeModal получает сразу же позвонил в ShowModal. По какой-то причине emptyModal увольняется сразу же, когда я намерен только запустить его, когда пользователь нажимает ESC или вне модальности.

function closeModal(selector) { 
$(document).keyup(function(e){ 
    if (e.keyCode == 27) { 
    emptyModal(selector); 
    } 
}); 

$(document).click(function(e) { 
if (!$(e.target).closest(selector).length) { 
    emptyModal(selector);  
    } 
}); 
} 

Использование console.log я могу видеть, что «окно закрыто» и убедитесь, что emptyModal становится немедленно после closeModal даже если он завернут в условных операторах.

function emptyModal(selector) { 
console.log('window closed') 
$(selector).empty().hide(); 
$('.cloaked').hide(); 
} 

Я думаю, что в целом у меня есть неправильное понимание того, как делать то, что мне нужно, и я, вероятно, реализую это неправильно. Просто примечание, у меня есть closeModal и emptyModal как отдельные функции, поскольку я использую их в разных модальных функциях просмотра, кроме showModal.

Answer 1

В вашей closeModal функции, вместо того, чтобы событие клика по всему документу попробовать положить его на .cloaked

$('.cloaked').click(function(e) { 
if (!$(e.target).closest(selector).length) { 
    emptyModal(selector);  
    } 
}); 

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