I'm trying to figure out why I can't change the backdrop to 'true' after first changing it to 'static' when using Bootstrap's modal.

I run this code:

$('#modal').modal({backdrop: 'static', keyboard: false, show: true});

$.post('server.php', $('#form').serialize(), function(data) {
    if(data.success) {
        $('#modal').modal({backdrop: true, keyboard: true});
    } else {
        $('#modal').modal({backdrop: true, keyboard: true});
    }
}, 'json');

It will set it so the backdrop and keyboard will not function at the start, but I cannot figure out why I can't set it back to default.

Thanks for reading.

I'm trying to figure out why I can't change the backdrop to 'true' after first changing it to 'static' when using Bootstrap's modal.

I run this code:

$('#modal').modal({backdrop: 'static', keyboard: false, show: true});

$.post('server.php', $('#form').serialize(), function(data) {
    if(data.success) {
        $('#modal').modal({backdrop: true, keyboard: true});
    } else {
        $('#modal').modal({backdrop: true, keyboard: true});
    }
}, 'json');

It will set it so the backdrop and keyboard will not function at the start, but I cannot figure out why I can't set it back to default.

Thanks for reading.

• javascript
• jquery
• ajax
• twitter-bootstrap
• bootstrap-modal

3 Answers 3

How about this

it looks like twitter bootstrap is storing all data in a data variable called bs.modal. so just remove that data variable and reinitialize the modal.

Your final code will look something like this

$('#modal').modal({backdrop: 'static', keyboard: false, show: true});

$.post('server.php', $('#form').serialize(), function(data) {
    if(data.success) {
        $('#modal').removeData('bs.modal').modal({backdrop: true, keyboard: true});
    } else {
        $('#modal').removeData('bs.modal').modal({backdrop: true, keyboard: true});
    }
}, 'json');

The above solution was not working fine for me.

So I destroyed this instance of modal using this :-

$('#modal-xl').on('hidden.bs.modal', function (e) {
     $("#modal-xl").modal('dispose'); 
})

Check working of dispose method here

Follow up to the solution presented by @Cerlin: I could not simply remove all data set to Bootstrap v4.6's modal, since I had other functionality attached to it. Using jQuery v3.6's $.extend(), I was able to modify the data directly to allow the backdrop/keyboard to be usable again. If you don't use jQuery and do not support Internet Explorer, you could always use JavaScript's built-in method Object.assign().

// Variable Defaults
var bootstrapModal = $('.modal');
var bootstrapData  = bootstrapModal.data('bs.modal');

// Release Modal Backdrop
bootstrapModal.data('bs.modal', $.extend(true, bootstrapData, {
    _config: $.extend(true, bootstrapData._config, {
        backdrop: true,
        keyboard: true
    })
}));