移動CSS疊加顯示不正確

在此先感謝您提供的任何建議！我在我的網站的桌面版上有覆蓋圖，效果很好。但是，當我設計覆蓋層用於移動設備時，會給我帶來問題。這裏的jfiddle：移動CSS疊加顯示不正確

代碼如下。當我在移動視圖中嘗試此操作時，內容似乎出現在錯誤的級別（可能低於#fixedoverlay，但高於#overlaymatte？）基本上，出於某種原因，我無法與#overlaycontent中的內容進行交互。它上面有一層黑色的背景，在div頂部只有一條白色的條紋。有任何想法嗎？謝謝！

我的CSS：

#fixedoverlay, #overlaymatte { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: #000000; 
opacity: 0.7; 
filter: alpha(opacity=70); 
z-index: 999; 
} 

#overlaycontent { 
position: relative; 
width: 960px; 
margin: 25px auto; 
max-height: 75%; 
overflow: auto; 
background: #fff; 
padding: 20px; 
/* border: 20px solid #fff; */ 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
z-index: 9999; 
} 


#overlaymatte { 
background: none; 
}

我的HTML

<div id="fixedoverlay"> 
<div id="overlaymatte"></div> 
<div id="overlaycontent"> 
    <div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my  content</p><p>Here's my content</p></div> 
</div> 
</div>

來源

2013-03-03 KDP

道歉，但是這是一個HTML的結果，有關我現在用的手機設計軟件的JavaScript問題本質（Mobify。），我有一點javascript，自動附加覆蓋：

function popUpOverlay(){ 
     $('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>'); 
     $('#overlaycontent').append(loaderimg); 
     $('#loaderimg').show(); 
     $(window).keydown(function(e){ 
      if(e.keyCode == 27) { 
       $('#fixedoverlay').remove(); 
      } 
     }) 
    }

我的問題是，我在整個網站上應用了兩次Javascript：一次通過參考鏈接在文檔的頭部，一次通過Mobify的全局選擇/腳本功能。由於javascript被應用了兩次，我實際上看到了兩個疊加層的實例：一個在另一個之上。我修復了JavaScript，只發生了一個實例，問題不再發生。

來源

2013-03-04 13:55:19 KDP

移動CSS疊加顯示不正確

回答

相關問題