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.

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.

• javascript
• bootstrap-4
• bootstrap-modal

• 2 Possible duplicate of Disable click outside of bootstrap modal area to close modal – Lelio Faieta Commented Jul 30, 2018 at 13:13
• with just a quick google search you'd have found your solution on this site: here – Lelio Faieta Commented Jul 30, 2018 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 Commented Jul 30, 2018 at 13:15
• On a separate note, use $(function(){ instead of $(window).on('load', function({. It looks cleaner. – Damodar Dahal Commented Jul 30, 2018 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 Commented Jul 30, 2018 at 13:21

2 Answers 2

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>

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");
    }
}