在打开Bootstrap模式弹出窗口时启用背景 [英] Enable background when open Bootstrap modal popup

问题描述

我在项目中使用了Bootstrap的模式弹出窗口，并且想要以下事情:

I have used modal popup of Bootstrap in my project and want following things:

1. 打开模式弹出窗口并单击背景弹出窗口时，不应关闭.
2. 当打开的模式弹出窗口背景不应该模糊时，这意味着打开的模式弹出窗口背景不应有任何影响.
3. 打开模式弹出窗口后，用户还可以在不应关闭时间弹出窗口的背景上工作.

1. When open modal popup and click on the background popup should not close.
2. When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
3. After open modal popup user can also work on the background that time popup should not close.

推荐答案

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

1) When open model popup and click on the background popup should not close.

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

Include data attributes data-keyboard="false" data-backdrop="static" in the modal definition itself:

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

2)打开模型时，弹出背景不应模糊.意味着打开模型的弹出背景不会有任何影响.

2) When open model popup background should not blur. meaning opening model popup background should not affect any way.

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

.modal-backdrop {
    display:none;
}

3)打开模型弹出窗口后，用户还可以在不应关闭时间弹出窗口的背景上工作.

3) After open model popup user can also work on the background that time popup should not close.

在.modal-open .modal

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

侧面注:您可能需要通过媒体查询根据屏幕尺寸调整模式宽度.

SideNote: you may need to adjust the width of modal according to screen size with media queries.

免责声明:此答案仅用于演示如何实现所有3个目标.如果您有多个引导模态，上述更改将影响所有模态，强烈建议使用自定义选择器.

Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use custom selectors.

.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>

工作小提琴示例

这篇关于在打开Bootstrap模式弹出窗口时启用背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！