如何通过在模态窗口外单击来关闭模态？

Question

In a very simple jQuery modal, I close the modal by clicking on CLOSE as

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

How can I close the modal by clicking whether on CLOSE button (which is inside the modal windows) OR clicking anywhere outside the modal window.

Answer 1

Changing your function like so should work:

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

Answer 2

I found it helpful to include:

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

Answer 3

将相同的点击监听器添加到您的叠加层。

Answer 4

I know this question pertains to jQuery, but here's how I did this in Vue on my modal component in case anyone finds it helpful. My modal HTML is basically lifted directly from this: https://v2.vuejs.org/v2/examples/modal.html

I set two @click attributes, one on the outermost modal element ( modal-mask ) that calls my close() method (which emits the close event to the parent component) and one on the actual modal window element ( modal-container ) that with the .stop event modifier ( @click.stop ) to stop the click from bubbling up to the parent element ( modal-mask ). Works like a charm.