Question

我的模态窗口结构存在问题。我有一个div，它在单击它以显示模态窗口时调用一个函数。在showModal（）函数内部，如果用户单击ESC键或在文档中的任何位置退出模式窗口，我会调用另一个充当close函数的函数。

以下是代码：

$('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我可以看到＆＃39;窗口已关闭＆＃39;并确认当closeModal即使它被包装在条件语句中时立即调用emptyModal。

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

我认为总的来说，我对如何做我需要的东西有误解，而且我可能错误地执行了它。只是旁注，我将closeModal和emptyModal作为单独的函数，因为我在不同的模态视图函数中使用它们而不是showModal函数。

Answer 1

在你的closeModal函数中，不要在整个文档上放置click事件，而是尝试将它放在.cloaked

上

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

如果我理解正确的话，当模态对话框打开时，带有.cloaked类的元素应该在背景中显示黑色斗篷，因此单击模态对话框以外的任何位置将意味着用户点击了带有.cloaked类的元素。

jQuery调用函数

1 个答案: