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

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. 将模态框从应该具有 position:fixed 或 relative 的 css 属性的父容器中取出。
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 进行了编码，如果您更改事件处理程序以检测模态打开事件之前的事件，它也应该适用于其他版本。