我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
作为答案提出的解决方案不起作用,有什么问题?
$(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>
其他回答
你可以设置模式弹出窗口的默认行为使用下面的代码行:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.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>
$(document).ready(function(e){
$("#modalId").modal({
backdrop: 'static',
keyboard: false,
show: false
});
});
" background:'static'"将阻止关闭模式时,点击它之外; "keyboard: false"指定模式可以由escape键关闭(Esc) "show: false"将在页面加载完成时隐藏模式
如果你想有条件地禁用背景单击关闭功能。您可以使用下面的行在运行时将背景选项设置为静态。
引导v3.xx
jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';
引导v2.xx
jQuery('#MyModal').data('modal').options.backdrop = 'static';
这将防止已经实例化的模型将背景选项设置为false(默认行为)关闭。