如何防止模式在背景点击时关闭,并且仍然让点击注册以与屏幕上的其余控件一起工作?
使用静态方法
$('#myModal').modal({backdrop: 'static', keyboard: false})
禁用整个背景。
编辑: 我的确切问题是 - 我在屏幕上有不同的按钮,每个按钮都必须在双击时显示弹出窗口。现在,当我打开一个弹出窗口时,我可能还想在不关闭第一个弹出窗口的情况下打开另一个弹出窗口。如果我将背景设置为静态,则单击其他按钮将不起作用,如果我不将其设置为静态,则打开第二个按钮会关闭第一个按钮。如何启用一次打开多个弹出窗口?
谢谢!
最佳答案
在样式表中添加它,确保它覆盖默认的 Bootstrap 模式值。
.modal-backdrop.in {
opacity: 0 !important;
z-index: -1050 !important;
}
或
.modal-backdrop {
display: none !important;
}
工作示例
.modal {
-webkit-transform: translateX(0%) translateY(25%) !important;
-moz-transform: translateX(0%) translateY(25%) !important;
-ms-transform: translateX(0%) translateY(25%) !important;
transform: translateX(0%) translateY(25%) !important;
}
.modal-backdrop {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-backdrop="static">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal2" data-backdrop="static">Open Modal 2</button>
<label>This is a text and can be selected for copying</label>
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" 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">This is Modal Header 2</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
注意:模态位置更改 css 仅用于演示目的。
关于javascript - Bootstrap 模式 : Disable close on backdrop click without disabling the background controls,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33000898/