我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
只需将背景属性设置为“static”。
$('#myModal').modal({
backdrop: 'static',
keyboard: true
})
你可能还想将键盘属性设置为false,因为这样可以防止按下键盘上的Esc键关闭模式。
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
myModal是包含您的模式内容的div的ID。
其他回答
有点像@AymKdn的答案,但这将允许您在不重新初始化模态的情况下更改选项。
$('#myModal').data('modal').options.keyboard = false;
或者如果你需要做多个选项,JavaScript的with在这里派上用场!
with ($('#myModal').data("modal").options) {
backdrop = 'static';
keyboard = false;
}
如果模式已经打开,这些选项将只在模式下次打开时生效。
<button type="button" class="btn btn-info btn-md" id="myBtn3">Static
Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Static Backdrop</h4>
</div>
<div class="modal-body">
<p>You cannot click outside of this modal to close it.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#myBtn3").click(function(){
$("#myModal3").modal({backdrop: "static"});
});
});
</script>
你也可以在模态定义中包含这些属性:
<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
我相信您想要将背景值设置为静态。如果您想避免在使用Esc键时关闭窗口,则必须设置另一个值。
例子:
<a data-controls-modal="your_div_id"
data-backdrop="static"
data-keyboard="false"
href="#">
如果你使用JavaScript:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
试试主线:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">