jQuery模態對話框被覆蓋div隱藏，如果對話框的父對象具有固定位置

我的jQuery對話框之一是在具有固定位置（頁腳）的div內定義的。當打開一個模式jQuery對話框時，jQuery會創建一個覆蓋div，隱藏整個頁面，然後將對話框打開在頂層，比覆蓋div具有更高的Z-index。不幸的是，任何在具有固定位置的div內呈現的對話都被覆蓋div覆蓋，儘管要打開的模式對話獲得更大的z-index，然後覆蓋本身。jQuery模態對話框被覆蓋div隱藏，如果對話框的父對象具有固定位置

下面的HTML代碼，我減少了用於演示目的的問題顯示了非固定位置的div內的固定位置專區內的對話之間的區別：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/themes/sam/theme.css?ln=primefaces&amp;amp;v=2.2.1" /> 
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&amp;v=2.2.1" /> 
    <title>CSS TEST</title><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=2.2.1"></script><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&amp;v=2.2.1"></script> 

    <script> 
    /*<![CDATA[*/ 
     jQuery(function() { 
      jQuery("#dialog1").dialog({ 
       autoOpen: false, 
       modal: true 
      }); 

      jQuery("#dialog2").dialog({ 
       autoOpen: false, 
       modal: true 
      }); 
     }); 
    /*]]>*/ 
    </script> 
</head> 

<body> 
    <div style="z-index: 1; position: static;" onclick="jQuery('#dialog1').dialog('open')"> 
     position: static; /* default */ 
     <div id="dialog1" title="Dialog1"></div> 
    </div> 

    <div style="z-index: 1; position: fixed; left: 100px; top: 100px" onclick="jQuery('#dialog2').dialog('open')"> 
     position: fixed; 
     <div id="dialog2" title="Dialog2"></div> 
    </div> 
</body> 

</html>

加載它看起來像頁面後即：

一個正常的div內 Page after it is loaded

對話框顯示正確

第一個對話框被定義與非固定的定位的div和通常出現的對話框：

固定定位的div內

First dialog appears correctly

對話框被疊加

注意，當第二對話顯示在固定定位的div內的定義，由於覆蓋div覆蓋，所以它不能被用戶點擊：

Second dialog does not appear correctly

請注意覆蓋div的z-index在兩種情況下都是1001，而對話框的z-index是1002.所以覆蓋div不應覆蓋對話框，但不幸的是，對話框在固定位置DIV。

由於我使用Primefaces我綁定到jQuery 1.4.4。在Firefox 4，最新版本和Safari，最新版本中發生此問題。

你能重建這個問題嗎？你有解決方案嗎？請注意，我不想將對話框放置在固定位置div 之外，但它可以解決問題。原因是我使用的是JSF的模板機制，因此頁面的頁腳將被內容動態填充 - 在這種情況下是彈出對話框。如果我必須把對話放在別的地方，它會打破模塊化。

來源

2011-04-14 Lars Blumberg

我在這裏得到了同樣的東西，我只是設置位置固定在覆蓋層上，它的工作。

.ui-widget-overlay{ 
    position:fixed; 
}

來源

2012-10-24 18:43:04 davidfrechette

不錯！謝謝你的簡單解決方案，但我無法再測試了。 – 2012-10-27 20:44:57

上帝保佑你。這解決了覆蓋Android上的模式的覆蓋問題。 – montrealist 2013-01-20 17:01:54

我想出了這個解決方案，當包含在頁面的底部，模板等將每個對話框移動到身體標記。

<script> 
    /* Bug fix that moves every dialog directly into the body tag since some jQueryUI dialogs are 
     sometimes not placed above the overlay div due to their parent divs */ 
    $(document).ready(function() { 
     var body = $("html body")[0]; 
     $("div.ui-dialog").each(function() { 
      $(this).appendTo(body); 
     }); 
    }); 
</script>

包括這個片段插入頭部沒有找到div.ui-dialog標籤，因爲這些div GT他們ui-dialog類動態注入。所以這個bug修復必須在之後執行。

來源

2011-04-20 06:16:32

適合我。thnx – prasadmadanayake 2015-03-17 08:52:26

jQuery模態對話框被覆蓋div隱藏，如果對話框的父對象具有固定位置

回答

相關問題