我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
试试主线:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">
其他回答
你也可以在模态定义中包含这些属性:
<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
作为答案提出的解决方案不起作用,有什么问题?
$(document).ready(function(){ $('.modal').modal('show'); $('.modal').modal({ backdrop: 'static', keyboard: false }) }); <html> <head> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <div class="text-right"><button type="button" class="btn btn-primary">print</button></div> </div> </div> </div> </div> </body> </html>
好吧,这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)
我的问题是类似的,模态框关闭时,我有里面的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加载。
正如D3VELOPER所说,下面的代码解决了它:
$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});
我使用jquery和bootstrap和简单removeData('modal')不工作。
你可以设置模式弹出窗口的默认行为使用下面的代码行:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';