透明遮罩层

最新推荐文章于 2022-02-16 17:05:19 发布

weixin_34237596

最新推荐文章于 2022-02-16 17:05:19 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webczw/archive/2012/02/07/2341636.html

版权

在很多WEB开发的时候我们都需要用到透明遮罩层来实现某些功能。下面共享一下比较实用的代码；

JS代码：

<script language="javascript" type="text/javascript">
//创建一个遮罩层
function Layer(html)
{
//创建一个遮罩层，半透明
    var lay = document.createElement("div");
    lay.id = "frame"
with(lay.style)
    {
        width = "100%";
        height = String(Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))+"px";
        background = "#000000";
        position = "absolute";
        left = "0";
        top = "0";
        filter = 'Alpha(opacity=70)';
        opacity = '0.7';
    }
    document.body.appendChild(lay);
    document.getElementById("frame").ondblclick = hiddenDiv;

//创建显示内容
    var info = document.createElement("div");
    info.id = "msg";
    info.innerHTML = html;
    document.getElementById("frame").appendChild(info);
with(info.style)
    {
        position = "absolute";
        left = "0px";
        top = document.documentElement.scrollTop + document.body.scrollTop + "px";
        marginLeft = (document.documentElement.clientWidth - info.offsetWidth)/2 + "px";
        marginTop = (document.documentElement.clientHeight - info.offsetHeight)/2 + "px";
    }
    document.body.appendChild(info);
}

//关闭遮罩层
function hiddenDiv(){document.body.removeChild(document.getElementById("frame"));document.body.removeChild(document.getElementById("msg"));}

function loadIndex(){
    Layer("<b>Cawei</b>");
}
</script>

HMTL代码：

<body onload="loadIndex()">
<table><tr><td>伟博小城</td></tr><tr><td><select><option>www.webczw.com</option><option>遮罩层</option></select></td></tr></table>
</body>

转载于:https://www.cnblogs.com/webczw/archive/2012/02/07/2341636.html

weixin_34237596

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
透明遮罩层

在很多WEB开发的时候我们都需要用到透明遮罩层来实现某些功能。下面共享一下比较实用的代码；JS代码：<script language="javascript" type="text/javascript">//创建一个遮罩层function Layer(html){ //创建一个遮罩层，半透明 var lay = document.createElemen...
复制链接

扫一扫