Bootstrap 3 - 模式在使用固定侧边栏时消失在背景下方

Posted 2023-02-22

【中文标题】Bootstrap 3 - 模式在使用固定侧边栏时消失在背景下方

【英文标题】：Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar

【发布时间】：2014-02-03 06:49:15

【问题描述】：

我已确定此问题是由于弹出窗口被包含在另一个带有position:fixed 的 div 中而发生的分区。 为了解决这个问题，我正在考虑使用以下代码即时更改模态的位置 -

$('.modal').on('show.bs.modal', function (e) 
        e.preventDefault();
        $(this).appendTo("body").modal('show');
     );

这样做只会在控制台中给我一个<error> jquery.js:1。此修复程序曾经在 bootstrap 2 中完美运行。

编辑 - 接下来尝试了

$('.modal').on('show.bs.modal', function (e) 
        e.preventDefault();
        console.info(e);
        $(e.target).appendTo('body').modal('show');
     );

但这显然会因为它陷入无限循环而搞砸了。我想一旦我找到一种有效的方法来一次检测同一模态上的多个节目事件，它就会好起来的。

【问题讨论】：

Bootstrap modal appearing under background的可能重复

【参考方案1】：

好的，经过一个多小时的编码和评估，我正在强调所有可能的解决方案 - 1. 将您的模式从应该具有位置：固定或相对的 css 属性的父容器中取出。 2. 移除modal元素本身的上述两个属性。 3. 对于像我这样的情况，在需要响应的情况下，模态自动附加到 div 的一部分，我为 bootstrap 3 编写了以下代码，它应该在所有模态上通用，而无需为每个模态单独编写 javascript。

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) 
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
          
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        
        else if(e.target==prevTarget && checkeventcount==2)
        
          checkeventcount--;
        
     );

到目前为止，这非常有效。它已针对 bootstrap 3 进行了编码，并且应该也适用于其他版本，前提是您更改事件处理程序以检测模式打开之前的事件。

【参考方案2】：

我遇到了同样的情况，我想出了一个漂亮的 CSS 技巧：

.modal 
  background: rgba(255, 255, 255, 0.8); /* The color depends on your template */

.modal-backdrop 
  display: none;

基本上，我会确保隐藏原始背景，并向模态容器添加透明的白色背景。事实证明，容器占据了身体的整个高度，以便有效地使实际模态居中。

但是，如果您的页面内容比您的浏览器“短”，则此技巧可能不起作用。如果您的页面占浏览器垂直高度的 60%，则新背景将仅应用于这 60%。

【参考方案3】：

最佳解决方案： 使用firebug查看侧边栏的z-index，例如：1000 我们插入文件 css 这段代码：

.modal-backdrop

 z-index: 1100;

.modal

 z-index: 1200;