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

Posted 2023-03-06

【中文标题】打开 Bootstrap 模式弹出窗口时启用背景

【英文标题】：Enable background when open Bootstrap modal popup

【发布时间】：2016-05-25 02:58:40

【问题描述】：

我在我的项目中使用了 Bootstrap 的模态弹出窗口，并且想要以下内容：

当打开模式弹出窗口并单击背景弹出窗口时，不应关闭。 当打开的模态弹出背景不应模糊，这意味着打开模态弹出背景不应影响任何方式。 打开模态弹窗后，用户还可以在不关闭时间弹窗的后台工作。

【问题讨论】：

从modal 的根div 和data-backdrop="static" 中删除backdrop 类

浏览这个答案我已经描述了一个经过测试的解决方案***.com/a/61337161/1714147

【参考方案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 个目标如果您有多个引导模式，上述更改将影响所有模式，强烈建议使用自定义选择器。

.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

【讨论】：

非常感谢您解决了所有问题。但是还有 1 个问题我无法修复 .modal-open .modal css 的高度。高度一直蔓延到页面的最后，我无法点击背景。谢谢

当你打开modal时，你看到页面滚动条还是隐藏了？如果模态打开，页面背景是否可以滚动并且最后是否设置了固定高度，默认情况下，模态会从其中的内容继承它的高度？

当打开模型页面背景滚动不可见时。

在 css 中添加 .modal-open overflow: auto !important; 看看能否解决问题

我在后面有剑道网格，当弹出窗口打开时，我无法在网格中进行内联编辑。应该怎么做？

【参考方案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-dialogmargin: 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" );

【参考方案3】：

如果您想在模式打开时处理输入/文本区域元素，您可以使用它。

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

【参考方案4】：

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