页面覆盖以显示一条信息，照片或者常见的登录，广告，
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.overlay{
background-color:#000;
opacity:.5;
filter:alpha(opacity=50);
position:fixed;
top:0;left:0;
width:100%;height:100%;
z-index:10;
}
.overlaymsg{
position:absolute;
background-color:yellow;
padding:10px;
width:200px;
height:200px;
font-size:2em;
z-index:11;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
<script>
function displayPopup(){
var overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.setAttribute("class","overlay");
document.body.appendChild(overlay);
var msg = document.createElement("div");
var txt = document.createTextNode("please join our mailing list!(click to close)");
msg.appendChild(txt);
msg.setAttribute("id","msg");
msg.setAttribute("class","overlaymsg");
msg.onclick = restore;
document.body.appendChild(msg);
}
function restore(){
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("msg"));
}
window.onload = function(){
displayPopup();
}
</script>
</head>
<body>
<p>Existing material.</p>
</body>
</html>
特点：覆盖整个web页面，设置遮布（样式overlay）的宽高为100%，要能看见底部的信息，设置透明度：opacity：.5;filter:alpha(opacity=50);
消息显示(样式overlaymsg)设置要在遮布之上，设置z-index 的值远大于遮布，居中显示，设置左边距和上边距50%。
最后一个要确保上下滚动鼠标时，样式一致，设置遮布定位方式为：fixed；
显示隐藏页面：
*.style.hidden = "visible";
*.style.hidden = "hidden";
特点：任然占用了物理空间，影响其他的元素，
*.style.display = "block";
*.style.display = "none";
特点：完全从页面布局中删除了该元素，
display其他的属性值：inline-block 内容像一个块级元素格式化，然后像内联元素排练
inherit 默认显示，继承该元素的父节点
补充：
块元素：div , p , form, ul, li , ol, dl, address, fieldset, hr, menu, table
行内元素：span, strong, em, img , input, select, textarea,
时间： 2024-10-06 14:21:26