Closing a modal on click outside of modal

[aaron4osu]

I’m trying to close a modal popup window if the user clicks anywhere outside of the modal, or the close Botton at the bottom. The close button works, but not the on click outside the modal. Here are a couple of things I’ve tried. I also tried replacing the “.modal-backdrop” with body and a couple other things but nothing is working.

$(".modal-backdrop").click(function(){
  $(".modal").removeClass("visible");
  $(".modal").modal('hide');
});

Here is a link the the dev site. It’s the “Find A Salon” Botton on the nav at the top right that opens the modal. http://phia.signal-interactive.com

Any idea?

[Paul_Wilkins]

This is when a document click event is useful. You can then check if the click happened inside of the modal, and if it didn’t you can then close the modal.

[m3g4p0p]

Hi @aaron4osu, that backdrop doesn’t exist initially but is getting created dynamically when opening the modal, so you’ll have to use event delegation here:

$(document).on('click', '.modal-backdrop', function () {
  $('.modal').modal('hide')
})

This should actually be the default behaviour though… are you somewhere else interfering with the existing modal logic? To avoid confusion, it would probably be better to use either the data attribute API or JS entirely… for instance, what’s the purpose of that visible class?

(x-post)

[aaron4osu]

perfect. that worked.