你的位置:首页 > 网页设计

[网页设计]利用div实现遮罩层效果


利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面。下面贴出示例代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>全屏div</title><style>html,body {  margin:0;  height:100%;}#test {  width:100%;  height:100%;  background-color:#000;  position:absolute;  top:0;  left:0;  z-index:2;  opacity:0.3;  /*兼容IE8及以下版本浏览器*/  filter: alpha(opacity=30);  display:none;}#log_window {  width:200px;  height:200px;  background-color:#FF0;    margin: auto;  position: absolute;  z-index:3;  top: 0;  bottom: 0;  left: 0;  right: 0;  display:none;}</style><script>function shield(){  var s = document.getElementById("test");  s.style.display = "block";    var l = document.getElementById("log_window");  l.style.display = "block";}function cancel_shield(){  var s = document.getElementById("test");  s.style.display = "none";    var l = document.getElementById("log_window");  l.style.display = "none";}</script></head><body><a href="javascript:shield()">打开遮罩</a><div id="test"></div><div id="log_window"><a href="javascript:cancel_shield()">关闭</a></div></body></html>