Question

我已经识别出这个问题正在发生，因为弹出窗口被position:fixed封闭在另一个div中，由于我正在使用的固定侧边栏功能包含身体中的所有内容并将其包含在内，我无法避免一个单独的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');
     });

但是由于它陷入无限循环，这显然会让它变得混乱。一旦我找到一种有效的方法来同时检测同一模态上的多个节目事件，我猜它会变得很好。

Answer 1

好的，经过一个多小时的编码和评估，我正在强调所有可能的解决方案 -
1.将你的模态从父容器中取出，该容器应该具有任何位置的css属性：fixed或relative 2.在模态元素本身上删除上述两个属性 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编码，并且也可以用于其他版本，前提是您更改事件处理程序以检测模态的打开事件之前。

Answer 2

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

.modal {
  background: rgba(255, 255, 255, 0.8); /* The color depends on your template */
}
.modal-backdrop {
  display: none;
}

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

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

Answer 3

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

.modal-backdrop
{
 z-index: 1100;
}
.modal
{
 z-index: 1200;
}

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

3 个答案: