我正在使用Twitter引导创建一个模态窗口。默认的行为是，如果你点击模式区域之外，模式将自动关闭。我想禁用，即不关闭模式窗口时，点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
好吧，这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)
我的问题是类似的，模态框关闭时，我有里面的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加载。
其他回答
你也可以在模态定义中包含这些属性:
<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
正如D3VELOPER所说，下面的代码解决了它:
$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});
我使用jquery和bootstrap和简单removeData('modal')不工作。
bs 5
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
...
</div>
</div>
b 4.4
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
...
</div>
</div>
好吧，这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)
我的问题是类似的，模态框关闭时，我有里面的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加载。
当背景设置为静态，模式将不会关闭时，点击它外面。点击下面的按钮尝试一下。使用data-bs- background ="static" data-bs-keyboard="false"作为引导5,data- background ="static" data-keyboard="false"作为引导4
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container p-5" > <div class="row text-center"> <div class="col-md-6"> <!-- Button trigger modal --> When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-bs-backdrop="static" data-bs-keyboard="false" <button type="button" class="btn btn-primary my-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Launch static backdrop 5 modal </button> <!-- Modal --> <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> </div> <div class="col-md-6"> <!-- Button trigger modal --> When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-backdrop="static" data-keyboard="false" <button type="button" class="btn btn-primary my-4" data-toggle="modal" data-target="#exampleModal"> Launch static backdrop 4 modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <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"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div> <!-- Bootstrap 5 Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Bootstrap 4 --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
推荐文章
- JSHint和jQuery: '$'没有定义
- 用jQuery检查Internet连接是否存在?
- 如何使用滑动(或显示)函数在一个表行?
- 如何把滚动条只为情态体?
- 嵌套行与自举网格系统?
- 如何用JavaScript截屏一个div ?
- 如何检测“搜索”HTML5输入的清除?
- 当元素从DOM中移除时触发事件
- Ajax成功事件不工作
- 引导下拉与Hover
- Bootstrap Modal立即消失
- jQuery的.bind() vs. on()
- jQuery .live() vs .on()方法，用于在加载动态html后添加单击事件
- 事件。returnValue已弃用。请使用标准的event.preventDefault()
- 推特引导3.0我如何“徽章徽章重要”现在
