Bootstrap模式：禁用背景单击关闭而不禁用背景控件 [英] Bootstrap modal : Disable close on backdrop click without disabling the background controls

问题描述

如何防止模式在背景点击时关闭并仍然让点击注册以与屏幕上的其他控件一起使用？

How can the modal be prevented from closing on a background click and still have the clicks register to work with the rest of the controls on the screen ?

使用静态方法

$('#myModal').modal({backdrop: 'static', keyboard: false})  

禁用整个背景。

编辑：
我的确切问题是这个 - 我在屏幕上有不同的按钮，每个按钮都必须在双击时显示弹出窗口。现在，当我打开一个弹出窗口时，我可能还想打开另一个弹出窗口而不关闭第一个弹出窗口。如果我使背景静止，单击其他按钮不起作用，如果我不使它静止，打开第二个关闭第一个。如何一次打开多个弹出窗口？

Edit : My exact problem is this - I have different buttons on the screen and each of them have to show a popup on double click. Now, when I open a popup, I may also want to open another popup without closing the first one. If I make the backdrop static, clicking other buttons doesn't work and if I don't make it static, opening the second closes the first one. How do I enable opening multiple popups at a time ?

谢谢！

推荐答案

在样式表中添加它，确保它覆盖默认的bootstrap模态值。

Add this in style sheet, make sure it override default bootstrap modal values.

.modal-backdrop.in {
    opacity: 0 !important;
    z-index: -1050 !important;
}

OR

.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">&times;</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">&times;</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仅用于演示目的。

Note: Modal position change css is just for demo purpose.

这篇关于Bootstrap模式：禁用背景单击关闭而不禁用背景控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！