我們常常可以在Web上看到，當有事件在背景執行時，Web會跳出半透明的視窗遮住後面的頁面，如：
這裡主要是利用JavaScript控制layer(Z-Index)，以及style的opacity和style的display達成，layer控制element之間的stack，也就是MS office裡面常常提到的，"往上/下一層"，style.opacity則是透明度，style.display控制顯示或隱藏，這些就可以達成頁面遮罩的功能了。
<!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>
<script type="text/javascript">
//<![CDATA[
function show() {
document.getElementById("xie").style.display = "";
document.getElementById("content1").style.display = "";
document.getElementById("content1").innerHTML = "內容<br/><input onclick='hide()' type='button' value='確定'/>";
}
function hide() {
document.getElementById("xie").style.display = "none";
document.getElementById("content1").style.display = "none";
}
//]]>
</script>
<title>JavaScript Mask</title>
</head>
<body>
<div style=
"filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; width: 100%; background-color: White; display: none; height: 100%; position: absolute; left: 0; top: 0;"
id="xie"></div>
<div style=
"width: 100px; background-color: Red; display: none; height: 53px; position: absolute; left: 144px; top: 100px;"
id="content1"></div>
<input onclick="show()" type="button" value="顯示" />
</body>
</html>
沒有留言:
張貼留言