Can't disable the feature to click outside of modal and close

Question

I have a bootstrap modal that I've set to open on page load, which works perfectly.

However, I'm trying to disable the feature where it closes if you click outside of the modal.

It contains a required form that must be filled and submitted in order for the modal to close, which is something I'm working on with the submit button, but I need to first make sure the user can't close this modal any other way without filling in the form and submitting.

Here's the current code:

<script type="text/javascript"> 
$(window).on('load',function(){
    $('#my_modal').modal('show');
    $("#my_modal").modal({
        backdrop: 'static',
        keyboard: false
    });

});
</script>

So it opens on page load no problem, but if I hit the x, or click outside of it it closes and I wan't to totally disable that.

Possible duplicate of [Disable click outside of bootstrap modal area to close modal](https://stackoverflow.com/questions/22207377/disable-click-outside-of-bootstrap-modal-area-to-close-modal) — Lelio Faieta, Jul 30 '18 at 13:13
with just a quick google search you'd have found your solution on this site: [here](https://stackoverflow.com/questions/22207377/disable-click-outside-of-bootstrap-modal-area-to-close-modal/30658435) — Lelio Faieta, Jul 30 '18 at 13:13
I did find that, and as you can see I implemented that, but it's not working in my code. I need to keep the same functionality of showing on page load but still disable this function, which isn't working even though I've used that code — Geoff_S, Jul 30 '18 at 13:15
On a separate note, use `$(function(){` instead of `$(window).on('load', function({`. It looks cleaner. — Damodar Dahal, Jul 30 '18 at 13:20
@DamodarDahal I'm using it that way so that the page load is the first thing to trigger the modal loading, and then calling the functions — Geoff_S, Jul 30 '18 at 13:21
I got it now, I see that I should have removed .modal('show') — Geoff_S, Jul 30 '18 at 13:23

score 6 · Accepted Answer · answered Jul 30 '18 at 13:23

6

Add the show property to the modal and only call once

<script type="text/javascript"> 
$(window).on('load',function(){
    $("#my_modal").modal({
        backdrop: 'static',
        keyboard: false,
        show: true // added property here
    });
});
</script>

answered Jul 30 '18 at 13:23

daddygames

1,880
1
11
18

Thank you! I realized before your answer that removing ```.modal('show')``` fixed it but I like this answer for still including the show value – Geoff_S Jul 30 '18 at 13:25
Awesome :) As you may have noticed, the problem was that the modal was being shown with the default properties when .modal('show') was called and so the options being called later were not being applied. – daddygames Jul 30 '18 at 13:28

score 0 · Answer 2 · edited Jan 26 '22 at 09:14

0

I just used .add instead of .toggle inside window event which fixed the issue.

function windowOnClick(event) {
  console.log(event.target)
    if (event.target == modal) {
         modal.classList.add("modal-show");
    }
}

edited Jan 26 '22 at 09:14

Dharman

30,962
25
85
135

answered Jan 26 '22 at 09:08

radsin

65
2
11

Can't disable the feature to click outside of modal and close

2 Answers2