Bootstrap 3 - 當使用固定邊欄時，模式在背景下方消失

我已經識別出這個問題，因爲彈出窗口被封閉在另一個div中，我無法避免，因爲我使用的固定側邊欄功能包含所有內容並將其包含在一個單獨的div中。爲了彌補這個問題，我想換就用下面的代碼飛模態的位置 -Bootstrap 3 - 當使用固定邊欄時，模式在背景下方消失

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

這樣做只是給了我在控制檯中<error> jquery.js:1。此修復程序用於在引導程序2中完美工作。

編輯 - 嘗試這個未來

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

但是這顯然打亂它，由於它陷入無限循環。一旦我找到一種有效的方法一次檢測同一模式下的多個演出事件，猜猜它會一帆風順。

來源

2014-01-15 Rohan

好了，所以一個多小時的編碼和評估後，我強調所有可能的解決方案 -
1.把你的語氣指出，應當具有或者位置的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--; 
     } 
    });

這個效果很好，現在手指交叉。它已經被編碼爲引導程序3，並且應該可以用於其他版本，前提是您可以更改事件處理程序來檢測模式的打開事件之前。

來源

2014-01-15 01:14:14 Rohan

我是在同樣的情況，我想出了一個漂亮的CSS技巧：

.modal { 
    background: rgba(255, 255, 255, 0.8); /* The color depends on your template */ 
} 
.modal-backdrop { 
    display: none; 
}

基本上，我要確保原有的背景下是隱藏的，我添加了一個透明的白色背景的模式容納。發現容器需要身體的整個高度纔能有效地居中實際模態。

但是，如果您的頁面內容比您的瀏覽器「短」，則此技巧可能無法使用。如果您的網頁佔用了瀏覽器垂直高度的60％，則新背景僅適用於此60％。

來源

2014-06-04 17:47:21

最佳的解決方案：使用螢火蟲查看邊欄，實施例的z索引：1000 我們插入文件的CSS此代碼：

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

來源

2014-06-25 05:01:06

Bootstrap 3 - 當使用固定邊欄時，模式在背景下方消失

回答

相關問題