首页 > 网站 > WEB开发 > 正文

利用div实现遮罩层效果

2024-04-27 14:25:53
字体:
来源:转载
供稿:网友
利用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>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表