我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。

有人可以分享jQuery代码来做到这一点吗?


当前回答

只需将背景属性设置为“static”。

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

你可能还想将键盘属性设置为false,因为这样可以防止按下键盘上的Esc键关闭模式。

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

myModal是包含您的模式内容的div的ID。

其他回答

只需为背景设置静态选项(背景:'static')。为了防止在键盘上按Esc键关闭模式,你必须将键盘选项设置为false(键盘:false)

所以,代码将是。

var jq = jQuery.noConflict();
jq(document).ready(function(){
    jq('#exampleModal').modal({backdrop: 'static', keyboard: false}); 
});

为了在模式显示后更新Bootstrap 4.1.3中的背景状态,我们使用了Bootstrap- modal - wrapper插件中的下面一行。插件存储库代码引用。

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");

大雄的答案适用于单一情况,但我在一个旧网站上有20-30个情态动词,正在寻找一个答案,为每个用bootstrap打开的情态动词设置这个。

您可以针对模式的事件名称空间,并为每个引导模式添加默认设置。

你可能不想对每个模式都这样做,但如果你这样做了,就没有必要静态地指定每个模式调用。

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this = $(this)
    var href = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
    var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data(), {backdrop: 'static', keyboard: false})

    e.preventDefault()

    $target
      .modal(option)
      .one('hide', function () {
        $this.focus()
      })
})

在我的例子中,我在选项结构中添加了{background: 'static', keyboard: false}。

你可以设置模式弹出窗口的默认行为使用下面的代码行:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

有点像@AymKdn的答案,但这将允许您在不重新初始化模态的情况下更改选项。

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

或者如果你需要做多个选项,JavaScript的with在这里派上用场!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

如果模式已经打开,这些选项将只在模式下次打开时生效。