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

问题描述

我已经确定这个问题是由于弹出窗口被包含在另一个带有 position:fixed 的 div 中而发生的，由于我使用的固定侧边栏功能将所有内容包含在body 并将其包含在单独的 div 中.为了解决这个问题，我正在考虑使用以下代码动态更改模态的位置 -

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

这样做只会给我一个<代码><错误>jquery.js:1 在控制台中.此修复程序曾经在引导程序 2 中完美运行.

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

编辑 - 接下来尝试这个

$('.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.

推荐答案

好的，经过一个多小时的编码和评估，我强调了所有可能的解决方案 -
1. 将您的模态从父容器中取出，该父容器应该具有 position:fixed 或 relative 的 css 属性.
2. 移除模态元素本身的上述两个属性.
3. 对于像我这样的情况，在需要响应的情况下，模态自动附加到 div 的某个部分，我为引导程序 3 编写了以下位，它应该在所有模态上通用，而无需为每个模态单独编写 javascript.

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

到目前为止，这非常有效.它已针对 bootstrap 3 进行编码，并且应该也适用于其他版本，前提是您更改事件处理程序以检测模式的打开前事件.

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屋！