我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
在引导5中属性名已经改变。你可以使用以下方法:
data-bs-backdrop="static" data-bs-keyboard="false"
其他回答
你可以禁用后台的点击关闭行为,并通过添加JavaScript到你的页面,使它成为所有modal的默认值(确保它在jQuery和Bootstrap JS加载后执行):
$(function() {
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
你也可以在模态定义中包含这些属性:
<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
好吧,这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)
我的问题是类似的,模态框关闭时,我有里面的iframe正在加载,所以我必须禁用模态解散,直到iframe完成加载,然后重新启用。
这里提出的解决方案并不是100%有效。
我的解决办法是:
showLocationModal = function(loc){
var is_loading = true;
if(is_loading === true) {
is_loading = false;
var $modal = $('#locationModal');
$modal.modal({show:true});
// prevent Modal to close before the iframe is loaded
$modal.on("hide", function (e) {
if(is_loading !== true) {
e.preventDefault();
return false
}
});
// populate Modal
$modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){
is_loading = true;
});
}};
所以我暂时阻止模态关闭:
$modal.on("hide", function (e) {
if(is_loading !== true) {
e.preventDefault();
return false
}
});
但是随着变量is_loading将重新启用关闭后Iframe加载。
有点像@AymKdn的答案,但这将允许您在不重新初始化模态的情况下更改选项。
$('#myModal').data('modal').options.keyboard = false;
或者如果你需要做多个选项,JavaScript的with在这里派上用场!
with ($('#myModal').data("modal").options) {
backdrop = 'static';
keyboard = false;
}
如果模式已经打开,这些选项将只在模式下次打开时生效。
把这两项加起来
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">
它将禁用逃避按钮,也点击任何地方和隐藏。