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

Question

我已经识别出这个问题正在发生,因为弹出窗口被封闭在另一个div中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');
     });

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

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%。