Bootstrap 3 – 使用固定侧边栏时，模态在背景下消失
我已经识别出这个问题正在发生，因为弹出窗口被封闭在另一个具有position:fixed div中position:fixed了我无法避免由于我使用的固定侧边栏function，它包含了正文中的所有内容并将其封装在一个单独的div中。 为了抵消这个问题，我正在考虑使用以下代码动态更改模态的位置 –
$('.modal').on('show.bs.modal', function (e) { e.preventDefault(); $(this).appendTo("body").modal('show'); });
这样做只是在控制台中给了我一个 jquery.js:1 。 这个修复程序曾经在bootstrap 2中完美地工作。
编辑 – 接下来尝试了
$('.modal').on('show.bs.modal', function (e) { e.preventDefault(); console.info(e); $(e.target).appendTo('body').modal('show'); });
但是由于它陷入了无限循环，这显然会让它变得混乱。 一旦我找到一种有效的方法一次检测同一模态上的多个节目事件，我猜它会好起来的。
好吧，经过一个多小时的编码和评估，我强调了所有可能的解决方案 –
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编码，并且也可以用于其他版本，前提是您更改事件处理程序以检测模式的打开事件之前。
我处于相同的情况，我想出了一个漂亮的CSS技巧：
.modal { background: rgba(255, 255, 255, 0.8); /* The color depends on your template */ } .modal-backdrop { display: none; }
基本上，我确保隐藏原始背景，并为模态容器添加透明的白色背景。 结果是容器占据了整个身体的高度，以便有效地居中实际模态。
但是，如果您的页面内容比浏览器“更短”，则此技巧可能无效。 如果您的页面占浏览器垂直高度的60％，则新背景将仅应用于此60％。
最佳解决方案：使用firebug查看侧栏的z-index，例如：1000我们插入文件css这段代码：
.modal-backdrop { z-index: 1100; } .modal { z-index: 1200; }