我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
为了在模式显示后更新Bootstrap 4.1.3中的背景状态,我们使用了Bootstrap- modal - wrapper插件中的下面一行。插件存储库代码引用。
$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");
其他回答
把这两项加起来
data-backdrop="static"
data-keyboard="false"
现在看起来是这样的
<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
它将禁用逃避按钮,也点击任何地方和隐藏。
是的,你可以这样做:
<div id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
data-backdrop="static" data-keyboard="false">
你可以设置模式弹出窗口的默认行为使用下面的代码行:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
试试主线:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">
大雄的答案适用于单一情况,但我在一个旧网站上有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}。