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 中立即被调用。出于某种原因，当我的意图是仅在用户单击 ESC 或退出模式时触发它时，emptyModal 也会立即触发。

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 我可以看到“窗口关闭”并确认当 closeModal 被包装在条件语句中时会立即调用 emptyModal。

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 类的元素。