Search code examples
javascriptbootstrap-4bootstrap-modal

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


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.


Solution

  • 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>