Bootstrap: Detect click on modal background

[sts-ryan-holton]

Is there a way we can reliably detect a click on the modal background of the modal component (https://getbootstrap.com/docs/4.1/components/modal/#live-demo) using jQuery? There's not really anything under the usage section for this https://getbootstrap.com/docs/4.1/components/modal/#usage

[Johann-S]

You can listen to the click event of your modal, this event will be triggered when the modal background is clicked

[sts-ryan-holton]

@Johann-S Which class do I listen for? Could you provide me an example please?

[MartijnCuppens]

@sts-ryan-holton, here you go: https://codepen.io/MartijnCuppens/pen/MBBjxX

document.querySelector('.modal').addEventListener('click', function(e) {
  // Check if the modal is clicked, not an element inside the modal:
  if (e.target === e.currentTarget) {
    console.log('Background is clicked');
  }
});

[Johann-S]

Thanks @MartijnCuppens 😉