一旦已经存在就更改 Bootstrap 模式选项

Posted 2023-02-22

【中文标题】一旦已经存在就更改 Bootstrap 模式选项

【英文标题】：Change Bootstrap modal option once it already exists

【发布时间】：2012-08-02 03:46:09

【问题描述】：

我正在使用Bootstrap Modal。我宣布它，我称之为它，我展示它......一切似乎都很好。

但是，如果我有一个已经存在的模式，之前显示的“键盘”属性为 false，我想在旅途中更改它怎么办？我的意思是：

首先，我创建了一个 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) 是否已执行。

关于为什么这不更新配置选项的值的任何线索？

【参考方案1】：

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

对于模态，您需要：

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

JSFiddle Demo (old)

---

对于 Bootstrap 3（如 @Gerald 在 cmets 中所述），您需要 bs.modal：

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

Waiting Modal Example

【讨论】：

这在模式启动之间很有效，但是当模式已经打开时呢？我在这里移动了模式内的切换按钮：jsfiddle.net/DCR4Y/10

@ChrisBarr 我在另一个答案中展示了如何做到这一点：Convert a Twitter Bootstrap Uncloseable Modal into a Closeable One。这取决于您要编辑模式的哪些属性。对于keyboard属性，您需要在更改对象上的属性值后调用escape()方法才能重新初始化它。

对于 bootstrap 3，数据被命名为 'bs.modal'

Bootstrap 在小提琴中坏了，所以我创建了一个新示例：codeply.com/go/cFSzteMbxS

@ZimSystem 很好的例子！下次直接添加它（这是一个社区 wiki）。顺便说一句，我还修复了我过时的小提琴。

【参考方案2】：

有点超出了 OP 的范围，但现在这是我两次搜索相同的解决方案（我的记忆是垃圾），两次我遇到了这个问题，这让我得到了最终的答案。我的问题是如何将“可关闭”的已经初始化和显示的模式变成“不可关闭”的模型。即使很少有其他用户需要此答案，以下是我根据接受的答案所做的：

*使用了 bootstrap3

$('#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.dismiss.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 版本中中断，但现在可以使用...

干杯:)

【讨论】：

有时 'keyup.dismiss.bs.modal' 不起作用，因此您可以改用 'keydown.dismiss.bs.modal'

【参考方案3】：

对于 bootstrap4

禁用退出按钮的关闭模式：

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

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

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

正如 nocturnal 所警告的那样，这可能会在未来的 bootstrap 版本中中断。

【讨论】：

通过单击背景禁用关闭对我不起作用。改用这个：$('#myModal').data('bs.modal')._config.backdrop = 'static';

背景禁用对我有用，但 [Esc] 禁用不起作用。引导程序 4.2.1。

其实是可以的，但是背景关闭是永久的，而[Esc]每次打开模式都需要关闭。

【参考方案4】：

对于 Bootstrap 4.1

options 属性应替换为 _config。

E.G.

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

【参考方案5】：

设置背景和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();

【参考方案6】：

您还可以在 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>

它对我有用！

【参考方案7】：

如果您不知道模态是否已经打开并且您需要配置模态选项（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

【参考方案8】：

对我来说这种方法效果最好

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

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

按退出键 在模式外点击 点击关闭按钮 甚至使用$('#modal').modal('hide')