javascript模式對話框

我對Javascript很初學。試圖學習模式對話框但遇到一些問題，代碼如下：javascript模式對話框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 

<head> 
<title>Click here to show the overlay</title> 
<style> 
#overlay { 
    visibility: hidden; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    text-align:center; 
    z-index: 200; 
    background-image:url(maskBG.png); 
} 

#overlay div { 
    width:300px; 
    margin: 100px auto; 
    background-color: #fff; 
    border:1px solid #000; 
    padding:15px; 
    text-align:center; 
} 
</style> 

<script> 
function overlay(){ 

el = document.getElementById("overlay"); 
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 

} 
</script> 

</head> 

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> 

<p align="center"><a href='#' onclick='overlay()'>Click here to show the overlay</a></p> 

<p align="center">this is my text... this is my text... this is my text...&nbsp;this 
is my text... this is my text...&nbsp;this is my text...this is my text... this 
is my text... this is my text... this is my text...</p> 


<p align="center"><b>this is my text... this is my text... this is my text...&nbsp;this 
is my text... t</b></p> 

<div id="overlay"> 
<div> 
<p>Content you want the user to see goes here.</p> 
</div> 
</div> 

</body> 

</html>

這是一個非常簡單的代碼。我的問題是爲什麼第二層彈出後無法點擊圖層？我會認爲，因爲第二層停留在第一層的頂部，並且已經阻擋第一層。但爲什麼我可以點擊「鏈接」來觸發函數overlay（）？第二層的可見性是隱藏的，但它仍然停留在第一層的權利之上？該函數甚至沒有改變z-index。我無法弄清楚，爲什麼。

另一個問題是，現在我怎麼能解散第二層並回到第一層？一些簡單的代碼表示讚賞。

感謝您的幫助！

來源

2012-09-13 GMsoF

您無法點擊疊加層下方的原因是因爲有底層圖層。它的背景是透明的，但都一樣。

請參閱http://jsfiddle.net/CSLD2/1/以獲得更好的說明。

要關閉圖層，只需插入某種關閉按鈕並使其onclick事件將該圖層設置爲不可見。您也可以考慮使用某種成熟的覆蓋庫，因爲它已針對不可預測的HTML條件進行了測試。

來源

2012-09-13 17:01:17 pp19dd

嗨，謝謝，現在我知道如何關閉了。我第一次仍然不明白爲什麼我們可以點擊「鏈接」並設置可見度？雖然隱藏了可視性，但上層始終處於上層。由於上層保持最高層，我們甚至不應該能夠點擊右側的「鏈接」？但是怎麼來？ – GMsoF

javascript模式對話框

回答

相關問題