标签：页面布局 登录 nod 空间 code res attribute document content
页面覆盖以显示一条信息，照片或者常见的登录，广告，
实例：
<!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,
标签：页面布局 登录 nod 空间 code res attribute document content
原文地址：http://www.cnblogs.com/dreamHot/p/6075940.html
