Bootstrap 3 - 使用固定边栏时，模式在背景下消失 [英] Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar

问题描述

我已经识别这个问题发生，由于弹出窗口被封装在另一个div与位置：固定，我不能避免由于固定边栏功能我使用包含主体中的所有内容，并将其包含在单独的div中。
为了抵消这个问题，我想使用下面的代码改变模态的位置：

  $（'。modal'）。on（'show.bs.modal'，function（e）{
 e.preventDefault（）; 
 $（this）.appendTo（body）。 （'show'）; 
}）; 
  

这样做只是给我一个< error> jquery.js：1 。

编辑 - 尝试下一个

pre> $（'。modal'）。on（'show.bs.modal'，function（e）{
e.preventDefault（）;
console。 info（e）;
$（e.target）.appendTo（'body'）。modal（'show'）;
}）;


但是这显然混乱了，因为它陷入无限循环。猜猜，一旦我找到一个有效的方式来检测同一模态在同一时间多个节目的事件。

解决方案

Ok所以经过一个多小时的编码和评估，我强调所有可能的解决方案 -

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--; 
} 
}）; 
  

这完全是现在的手指交叉。它已经编码为引导3，并且应该为其他版本工作，只要您更改事件处理程序来检测模态打开事件之前。

I have indentified this problem as happening due to the popup getting enclosed in another div with position:fixedthat I cannot avoid due to a fixed sidebar feature I am using that encloses all the content in the body and encloses it in a separate div. To offset this issue I am thinking of changing the position of the modal on the fly using the following code -

$('.modal').on('show.bs.modal', function (e) {
        e.preventDefault();
        $(this).appendTo("body").modal('show');
     });

Doing this just gives me a <error> jquery.js:1in the console. This fix used to work perfectly in bootstrap 2 .

Edit - tried this next

$('.modal').on('show.bs.modal', function (e) {
        e.preventDefault();
        console.info(e);
        $(e.target).appendTo('body').modal('show');
     });

But this obviously messes it up due to it getting stuck in an infinite loop. Guess it will get fine once I find an efficient way to detect multiple show events on the same modal at a time.

解决方案

Ok so after more than an hour of coding and evaluating, I am underlining all the possible solutions -
1. Take your modal out of the parent container that should be having the css property of either position:fixed or relative.
2. Remove the aforementioned two properties on the modal element itself.
3. For cases like mine where the modal is autoappended to a section of the div for situations requiring responsiveness, I coded the following bit for bootstrap 3 that should work generically on all modals without needing to individually code javascript for each.

    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--;
        }
     });

This works perfectly as of now fingers crossed. It has been coded for bootstrap 3 and should work for other versions too provided you change the event handler to detect the prior to opening event for the modal.

这篇关于Bootstrap 3 - 使用固定边栏时，模式在背景下消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！