Jquery Bootstrap 3-使用固定边栏时背景下的模式消失

我已经确认这个问题是由于弹出窗口被包含在另一个div中，并且带有

position:fixed

，这是我无法避免的，因为我正在使用一个固定的边栏功能，它将正文中的所有内容都包含在一个单独的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属性：固定或相对。
2.删除模态元素本身的上述两个属性。
3.对于像我这样的情况，在需要响应的情况下，模态被自动附加到div的某个部分，我为bootstrap3编写了下面的代码，该代码一般适用于所有模态，而不需要为每个模态单独编写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索引，例如：1000 我们在此代码中插入css文件：

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

可能重复的