我正在做一个bootstrap网站，与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
当前回答
如果你想禁用所有使用jQuery的模态的外部点击，使用这个。在jQuery之后添加这个脚本到你的Javascript。
jQuery(document).ready(function () {
jQuery('[data-toggle="modal"]').each(function () {
jQuery(this).attr('data-backdrop','static');
jQuery(this).attr('data-keyboard','false');
});
});
其他回答
根据你想要的屏幕宽度添加下面的css。
@media (min-width: 991px){
.modal-dialog {
margin: 0px 179px !important;
}
}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
试试这个，在我的应用程序开发…我还遇到了一个麻烦，模型属性的默认值=> data-keyboard="true"， => data- background ="非静态"
希望这对你有所帮助!
这个::
$(document).ready(function() { $("#popup").modal({ show: false, backdrop: 'static' }); $("#click-me").click(function() { $("#popup").modal("show"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="modal" id="popup" style="display: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Standard Selectpickers</h3> </div> <div class="modal-body"> <select class="selectpicker" data-container="body"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <a id="click-me" class="btn btn-primary">Click Me</a> </body> <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script> </html>
这是最简单的
你可以定义你的模式行为，定义数据键盘和数据背景。
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
如果你想禁用所有使用jQuery的模态的外部点击，使用这个。在jQuery之后添加这个脚本到你的Javascript。
jQuery(document).ready(function () {
jQuery('[data-toggle="modal"]').each(function () {
jQuery(this).attr('data-backdrop','static');
jQuery(this).attr('data-keyboard','false');
});
});
