Question

我在项目中使用了bootstrap的模态弹出窗口，并希望关注：

当打开模态弹出窗口并单击后台弹出窗口时，不应该关闭。
打开模态弹出窗口时不应该模糊。意思是打开模态弹出背景不应该影响任何方式。
在打开模态弹出窗口后，用户也可以在弹出窗口不应该关闭的背景上工作。

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;
}

SideNote：您可能需要根据媒体查询的屏幕尺寸调整模式的宽度。

免责声明：这个答案只是为了演示如何实现所有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>

Working Fiddle Example

Answer 2

backdrop =“ false”仅会删除背景黑屏，但不允许您对背景元素执行任何操作。为了使背景保持交互式并在全视图下将模式保持在中间位置，您需要在模式生成后使用js代码删除“模式”类。并且需要使用一些自定义的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中删除“模态”类 function openModal(){ $("#myModal").modal({backdrop:false,show:true}); $("#myModal").removeClass("modal"); //this will make modal moveable// $("#myModal .modal-dialog").draggable({ handle: ".moveable-modal-header" }); }

Answer 3

如果你想在模式打开时处理 input/textarea 元素，你可以使用它。

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

Answer 4

自 6 个月以来，我们一直在为在后台打开模式而苦苦挣扎，以下设置为我们所有的客户解决了这个问题：请将 IE 中的缓存行为从“自动”更改为“每次页面更改时”。

打开bootstrap模式弹出窗口时启用后台

4 个答案: