打开时更改Bootstrap模态背景设置

时间:2017-01-02 03:37:50

标签: javascript jquery twitter-bootstrap bootstrap-modal

我正在尝试将我的模态的背景设置更改为“静态”作为对事件的响应,以便它变为不可忽略的。我在单击模态内的按钮后设置$('#myModal').modal({ backdrop: 'static',keyboard:false }),尝试了这一点,没有运气。

我想要的效果类似于nakupanda's bootstrap-dialog的效果(请参阅操作按钮部分,当点击“点击禁用并旋转”时触发dialog.setClosable(true);按钮,模态不再可关闭)

请参阅此jsfiddle

我知道这个问题已被问过here,但它没有正确答案。我知道这可能是某种方式,但我无法分析nakupanda的代码。

5 个答案:

答案 0 :(得分:7)

尝试更改modal的选项,如下所示:

$('#myModal').data('bs.modal').options.backdrop = 'static';

这是 working example

答案 1 :(得分:4)

对于试图在v4上执行此操作的任何人,您需要更改:

$("#myModal").data('bs.modal').options.backdrop = 'static';

$("#myModal").data('bs.modal')._config.backdrop = 'static';

答案 2 :(得分:1)

为什么不在页面加载时使用选项而不是单击按钮来初始化模态?

只需定义一个文件就绪fn并将下面的代码放入其中。

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
  })

答案 3 :(得分:0)

你可以尝试这样的事情:http://codepen.io/bwobst/pen/GrKBKy?editors=1010

$('#open-modal').click(function(evt) {
  $('#myModal').modal({backdrop: 'static'});
  $('.modal button').prop('disabled', true);
});

当您点击“打开模式”时按钮它将背景设置为静态并禁用模态中的按钮。

答案 4 :(得分:0)

我想出了一个解决方案。问题是,即使您将背景设置为静态,仍然会有一个点击监听器。

我的解决方案就在这里。 https://jsfiddle.net/25zbf094/2/

的JavaScript

$('#makeIndismissable').click(function(){
  $('#myModal').prop('onclick',null).off('click');
});

$('#close').click(function(){
    $('#myModal').modal("hide")
})

我保持HTML大部分未更改,但在关闭按钮中添加了“关闭”的ID。正如您在上面所看到的,您仍然可以通过按右上角的X来关闭模态。