面具下顯示的jQuery模態窗口

我是jQuery的新手，我創建模態窗口時出現問題。我的模態窗口顯示在掩碼下。我希望它顯示在面具的頂部。我無法弄清楚這個問題，所以需要一些幫助。這裏是代碼：面具下顯示的jQuery模態窗口

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Modal Windows</title> 
<style type='text/css'> 
#overlay { 
    display: none; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin-right: auto; 
    margin-left: auto; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: #000; 
    z-index: 1; 
} 
#modal { 
    position: auto; 
    display: none; 
    margin-left: auto; 
    margin-right: auto; 
    color: #F00; 
    z-index: 100; 
} 
</style> 
<script type='text/javascript' src='../javascript/jquery.js'></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
     $("#click").click(function() { 
      $('#overlay').css({ 'display' : 'block', opacity : 0}); 
      $('#overlay').fadeTo(500,0.8); 
      $('#modal').show(); 
     }); 
}); 
</script> 

</head> 

<body> 
<a href="#" id="click">Click me</a> 
<div id="modal">This is modal</div> 
<div id="overlay"> 
</div> 

</body> 
</html>

來源

2011-10-01 shr3jn

這不是你的jQuery的問題，這是你的CSS的問題。您將模態設置爲position:auto，這意味着它是靜態定位的（靜態是默認值）並且不受z-index的影響。只要將定位改爲其他任何東西，它都可以工作。（相對的，絕對的，或固定）

例子：http://jsbin.com/unifum

定位是HTML和CSS的骨幹，你應該學習更多的東西（尤其是絕對定位，這是一個非常有用的工具，一旦你知道如何正確使用它）

來源

2011-10-01 09:45:10

謝謝你的解決方案！ :) – shr3jn

面具下顯示的jQuery模態窗口

回答

相關問題