打开 Bootstrap 模态框时启用后台

Question

我在项目中使用了Bootstrap的模态弹出窗口，并希望实现以下功能:

1. 打开模态弹出窗口后，点击背景不应该关闭弹出窗口。
2. 打开模态弹出窗口时，背景不应该发生模糊，即打开模态弹出窗口不应该对背景产生任何影响。
3. 打开模态弹出窗口后，用户也可以在背景上工作，此时弹出窗口不应该关闭。

- user3248761

---

从模态框的根div中删除backdrop类和data-backdrop="static"。 - Guruprasad J Rao

请查看这个答案，我在那里描述了一个经过测试的解决方案：https://dev59.com/OJbfa4cB1Zd3GeqPzNXQ#61337161 - Palash

Answer 1

1) 打开模型弹出窗口并单击背景时，不应关闭弹出窗口。

在模态定义本身中包括数据属性data-keyboard="false" data-backdrop="static"：

<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
    // Modal HTML Markup
</div>

2) 当打开模态弹窗时，背景不应该模糊。意思是，打开模态弹窗时，背景不应受到任何影响。

将 .modal-backdrop 的属性值设置为 display:none;。

.modal-backdrop {
    display:none;
}

3）打开模型弹出窗口后，用户还可以在后台工作，此时弹出窗口不应关闭。

在.modal-open .modal中添加值。

.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

顺便提一下：您可能需要使用媒体查询来根据屏幕尺寸调整模态框的宽度。

免责声明：本回答仅用于演示如何实现所有3个目标。 如果您有多个Bootstrap模态框，则上述更改将影响所有模态框，强烈建议使用自定义选择器。

.modal-backdrop {
  display: none !important;
}
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-sm">
    <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>

工作范例代码

- Shehary

---

非常感谢，我解决了所有的问题。但是还有一个问题，我无法解决.modal-open .modal css的高度。高度一直延伸到页面的底部，导致我无法点击背景。谢谢。 - user3248761

当您打开模态框时，是否看到页面滚动条或者它被隐藏了？如果模态框打开，页面背景是否可以滚动？最后，您是否设置了固定高度？默认情况下，模态框会从其内部内容继承高度。 - Shehary

打开模型页面时，背景滚动无法显示。 - user3248761

将以下内容翻译成中文：在CSS中添加.modal-open {overflow: auto !important;}，看看是否可以解决问题。 - Shehary

我在后台有一个Kendo网格，当弹出窗口打开时，我无法在网格中进行内联编辑。应该怎么做？ - Jothi

太棒了 :P - Soft Technoes

Answer 2

我们在过去6个月中一直苦于模态框在后台打开的问题，但以下设置已经解决了所有客户的问题：请将IE浏览器中的缓存行为从“自动”更改为“每次页面更改”。

- user11078255

Answer 3

如果您想在模态框打开时处理输入/文本区域元素，可以使用此方法。

$('#myModal').on('shown.bs.modal', function() {
  $(document).off('focusin.modal');
});

- kingkong

Answer 4

backdrop="false" 只会移除背景黑屏，但不允许您在背景元素上执行任何操作。 为了保持背景交互，并将模态框保持在中间位置并具有完整视图，您需要在生成模态框后使用js代码删除'modal'类。 并且需要使用一些自定义的CSS样式。添加一个自定义类到模态框中。

    <div class="modal fade custom-modal" id="myModal" role="dialog">
        <div class ="modal-dialog" role="document">
            <div class ="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header moveable-modal-header"></div>
               </div>
            </div> 
       </div>
    </div>
    //cs styles//
    .custom-modal{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        height: fit-content;
        padding: 0 !important;
    }
    .modal-dialog{margin: 0;}

现在，在填充模态框之后，需要从myModal div中删除'modal'类 function openModal(){ $("#myModal").modal({backdrop:false,show:true}); $("#myModal").removeClass("modal"); //这将使模态框可移动// $("#myModal .modal-dialog").draggable({ handle: ".moveable-modal-header" }); }

- Palash