一旦Bootstrap模式选项已经存在，请更改该选项

Change Bootstrap modal option once it already exists

本文关键字：选项 Bootstrap 模式 一旦 存在      更新时间：2023-09-26

我正在使用Bootstrap Modal。我申报，我叫它，我展示它…一切似乎都很好。

但是，如果我有一个已经存在的模态，之前显示的"keyboard"属性为false，并且我想在旅途中更改它，该怎么办？我的意思是：

首先，我创建了一个Modal（正如您所看到的，我声明Modal将键盘属性设置为false）：

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

但随后我声明了这个事件处理程序，这意味着如果发生了"某事"，我希望将键盘属性设置为true。

 $('#myModal').on('shown', function(e) {
    if (something){
        $('#myModal').modal({keyboard: true});
    }
 }

所以，当我去

$("#myModal").show();

事件处理程序没有做它应该做的事情，因为一旦按下Escape键，我就无法关闭模态。但我完全确信"某事"是真的，我已经检查并重新检查了$('#myModal').modal({keyboard: true})的执行情况。

有没有线索表明为什么这没有更新配置选项的值？

要更改已经启动的Bootstrap插件的配置设置，如Modal，您需要访问附加到元素的插件对象，如$('#pluginElement').data['somePlugin']，然后在其中设置options。

对于Modal，您需要：

$('#myModal').data('modal').options.keyboard = true;

JSFiddle演示（旧版）

对于Bootstrap 3（如@Gerald评论中所述），您需要bs.modal:

$('#myModal').data('bs.modal').options.keyboard = true;

等待模式示例

这有点超出了OP的范围，但这是我两次搜索同一个解决方案（我的记忆力很差），两次遇到这个问题，这让我找到了最终的答案。我的问题是如何将一个已经初始化并显示的"可关闭"模态变成一个"不可关闭"的模型。在罕见的情况下，即使另一个用户需要这个答案，以下是我根据公认的答案所做的：

*使用引导程序3

$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();

请注意，我没有按照上面的建议将options.keyboard属性更改为false（然后调用escape（））。我无法做到这一点，所以在查看了Bootstrap源代码后，我发现它所做的只是简单地删除一个"keyup.session.bs.modal"的事件侦听器。

要重新启用（在我的场景中，当模型被隐藏时）：

$('#modal').on('hidden.bs.modal', function (e) {
    $(this).data('bs.modal').escape(); // reset keyboard
    $(this).data('bs.modal').options.backdrop = true;
    $('button.close', $(this)).show();
});

这看起来非常笨拙，肯定会在即将到来的Bootstrap版本中打破，但目前有效。。。

干杯：）

对于引导程序4

要禁用逃生按钮上的关闭模式：

$('#myModal').off('keydown.dismiss.bs.modal');

点击背景时禁用关闭模式：

$('#myModal').data('bs.modal')._config.keyboard = false;

正如夜间警告的那样，这可能会在未来版本的bootstrap中打破。

对于引导4.1

options属性应替换为_config。

例如

const modal = $('#modal');
/*
 |------------------------------------------------------------------------------
 | Now, let us assume you already opened the modal (via js or data attribute).
 | If you want to access the options and modify.
 |------------------------------------------------------------------------------
 */
// [Not Required] Let us see what the object is like.
console.log( modal.data('bs.modal')._config );
// Override the options to lock modal.
modal.data('bs.modal')._config.backdrop = 'static';
modal.data('bs.modal')._config.keyboard = false;
// [optional] You can also hide all data-dismiss buttons too.
modal.find("[data-dismiss='modal']").hide();
// Revert all actions above.
modal.data('bs.modal')._config.backdrop = true;
modal.data('bs.modal')._config.keyboard = true;
modal.find("[data-dismiss='modal']").show();

设置background和esckey以在模态已经打开时不关闭模态

$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');

取消设置背景和键esc的目的是不关闭模式

$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();

您还可以在HTML标记中添加一个属性：data keyboard="false"

<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

它对我有用！

如果您不知道模态是否已经打开，并且需要配置模态选项（Bootstrap 3），请选择另一个选项：

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;
    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

感谢@nokturnal

对于引导程序5：

通过调用bootstrap.Modal.getInstance(domEl)

let domEl = $('#myModal')[0];
let bootstrapInstance = bootstrap.Modal.getInstance(domEl);
bootstrapInstance._config.show = false;
bootstrapInstance._config.backdrop = true;
bootstrapInstance._config.keyboard = false;

对我来说，这种方法是最好的

$('#modal').on('hide.bs.modal', function () {
    return false;
});

它防止模态在任何可能的情况下关闭：

  • 按下退出键
  • 在模态外部单击
  • 单击"关闭"按钮
  • 甚至使用CCD_ 9
相关文章：