为网页添加蒙板效果和弹出层js

最新推荐文章于 2023-10-31 10:20:39 发布

yu13767514297

最新推荐文章于 2023-10-31 10:20:39 发布

阅读量6.9k

点赞数

本文链接：https://blog.csdn.net/yu13767514297/article/details/47103765

版权

有的时候我们需要实现弹出一个层然后下面的层被一层蒙板蒙起来使用户不能点击里面的按钮效果，这一效果具体实现的代码如下：这是一个测试效果用的html，可以直接拷贝到html文件中执行。

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
//获得坐标
        function getPosition() {
            var top = document.documentElement.scrollTop;
            var left = document.documentElement.scrollLeft;
            var height = document.documentElement.clientHeight;
            var width = document.documentElement.clientWidth;
            //top=500;
            left = 200;
            //height=0;
            width = 500;
           height=300;
           top=200;
            return { top: top, left: left, height: height, width: width };
        }
        //屏蔽输入，显示蒙板
        function showMask(id) {
            var obj = document.getElementById(id);
            obj.style.width = document.body.clientWidth;
            obj.style.height = document.body.clientHeight;
            obj.style.display = "block";
        }
        //隐藏蒙板
        function hideMask(id) {
            document.getElementById(id).style.display = "none";
        }
        //显示登录
        function showPop(id) {
            showMask('mask');
            var width = 300; //弹出框的宽度
            var height = 170; //弹出框的高度
            var obj = document.getElementById(id);
            obj.style.display = "block";
            obj.style.position = "absolute";
            obj.style.zindex = "10";
            obj.style.overflow = "hidden";
            obj.style.width = width + "px";
            obj.style.height = height + "px";
            var Position = getPosition();
            leftadd = (Position.width - width) / 2;
            topadd = (Position.height - height) / 2;
            obj.style.top = (Position.top + topadd) + "px";
            obj.style.left = (Position.left + leftadd) + "px";
            window.onscroll = function() {
                var Position = getPosition();
                obj.style.top = (Position.top + topadd) + "px";
                obj.style.left = (Position.left + leftadd) + "px";
            };

        }
        //隐含
        function hidePop(id) {
       hideMask('mask');
            document.getElementById(id).style.display = "none";
        }
</script>
</head>

<body>
<div>
<input type="button" value="测试弹出层" οnclick="showPop('tcc')"/>
</div>


        <div id="mask" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3;
            opacity: 0.3; background-color: #000; width: 100%; height: 100%; z-index: 5px;
            position: absolute; left: 0; top: 0; display: none; overflow: hidden;">
        </div>
        
       
       <div id="tcc" style="display:none;background-color:#00ffff;">
       <input type="button" id="test" value="隐藏弹出层" οnclick="hidePop('tcc');"/>
       </div>


</body>

</html>