38

我正在使用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})是否已执行。

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

4

8 回答 8

50

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

对于模态,您需要:

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

JSFiddle 演示(旧)


对于 Bootstrap 3(如 @Gerald 的评论中所述),您需要bs.modal

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

等待模式示例

于 2012-08-04T18:55:41.607 回答
22

有点超出了 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 版本中中断,但现在可以使用......

干杯:)

于 2013-12-18T02:11:59.280 回答
10

对于引导程序4

要禁用退出按钮上的关闭模式:

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

要在单击背景时禁用关闭模式:

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

正如 nocturnal 所警告的那样,这可能会在未来版本的引导程序中中断。

于 2018-03-13T02:19:41.667 回答
4

对于引导程序 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();
于 2020-08-20T06:33:05.997 回答
3

当模态已经打开时,设置背景和 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();
于 2018-10-19T15:53:36.767 回答
2

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

这个对我有用!

于 2013-03-22T16:08:43.820 回答
1

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

于 2018-02-24T03:24:21.420 回答
0

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

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

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

  • 按退出键
  • 在模态外单击
  • 点击关闭按钮
  • 甚至使用$('#modal').modal('hide')
于 2021-07-03T17:43:56.023 回答