jQuery调用函数

Question

I have am having an issue with my modal window structure. I have a div that calls a function when it is clicked to show a modal window. Inside of the showModal() function, I call another function that acts as the close function if the user clicks ESC key or out of the modal window anywhere in the document.

Here is the code:

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

On click, this opens up showModal

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

closeModal gets called immediately in the showModal. For some reason emptyModal gets fired immediately as well when my intention is to only fire it when the user clicks ESC or out of the modal.

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);      
  }
 });  
}

Using console.log I can see that 'window closed' and confirm that emptyModal is getting called immediately when closeModal is even though it is wrapped in conditional statements.

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

I think overall I have a misunderstanding of how to do what I need and I am probably implementing it wrong. Just a side note, I have closeModal and emptyModal as separate functions as I use them in different modal view functions other than the showModal one.

Answer 1

In your closeModal function , instead of putting a click event on the whole document try putting it on .cloaked

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

If I understand correctly , the element with the .cloaked class is supposed to show a black cloak in the background when the modal dialog opens up, so clicking any where other than the modal dialog would mean that the user is clicking on the element with the .cloaked class.