How to close a modal by clicking outside the modal window?

Question

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

$(\'#close\').click(function(e) {
  e.preventDefault();
  $(\'#overlay, #alertModalO         


        

Answer 1

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://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.