Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭

Posted

技术标签:

【中文标题】Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭【英文标题】:Bootstrap modal : Disable close on backdrop click without disabling the background controls 【发布时间】:2016-01-05 04:43:08 【问题描述】:

如何防止模式在后台点击时关闭,并且仍然让点击注册以与屏幕上的其余控件一起使用?

使用静态方法

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

禁用整个背景。

编辑: 我的确切问题是 - 我在屏幕上有不同的按钮,每个按钮都必须在双击时显示一个弹出窗口。现在,当我打开一个弹出窗口时,我可能还想打开另一个弹出窗口而不关闭第一个。如果我将背景设为静态,单击其他按钮将不起作用,如果我不将其设为静态,则打开第二个按钮会关闭第一个按钮。如何启用一次打开多个弹出窗口?

谢谢!

【问题讨论】:

您能否就这样做的目的提供一些见解?我认为这将帮助您获得更好的答案 【参考方案1】:

在样式表中添加这个,确保它覆盖默认的引导模式值。

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

【讨论】:

以上是关于Bootstrap modal : 在不禁用背景控件的情况下禁用背景点击关闭的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 4 Modal出现背景角2

打开 Bootstrap 模式弹出窗口时启用背景

bootstrap 4 modal-backdrop 样式(特定模态)

BootStrap 模态框禁用空白处点击关闭

bootstrap模态框背景灰色,按钮全部无法点击,求解决办法

bootstrap modal 如何设置使其点击对话框外的灰色背景不退出!!