Why can't I change backdrop to 'true' or remove it after changing to 'static' in Bootstrap?

Question

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.

Answer 1

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');

Answer 2

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