为什么我不能将背景更改为 'true' 或在 Bootstrap 中更改为 'static' 后将其删除?

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

我想弄清楚为什么在使用 Bootstrap 的模态时将背景更改为 'static' 后无法将背景更改为 'true'。

我运行这个代码:

$('#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');

它会设置背景和键盘在开始时不起作用,但我不明白为什么我不能将它设置回默认值。

感谢阅读。

怎么样this

看起来 Twitter bootstrap 正在将所有数据存储在名为 bs.modal 的数据变量中。所以只需删除该数据变量并重新初始化模态。

您的最终代码将如下所示

$('#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');

上述解决方案对我来说效果不佳。

所以我用这个销毁了这个模态实例:-

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

Check working of dispose method here

跟进 @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
    })
}));