JavaScript弹出层效果

最新推荐文章于 2023-02-06 10:07:56 发布

辣姐什么鬼

最新推荐文章于 2023-02-06 10:07:56 发布

阅读量226

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/52414977

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果图：（简单实现功能）

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>弹出层效果</title>
    <style>
        a{
            display:block;
            height:30px;
            background:#ef6160;
            color:#fff;
            font-size:12px;
            font-weight:bold;
            line-height:30px;
            text-align:center;
        }
        a:hover{
            cursor:pointer;
        }
        .btn-log{
            width:100px;
        }
        #mask{
            background:#000;
            opacity:0.75;
            filter:alpha(opacity:75);
            width:100%;
            position:absolute;
            left:0;
            top:0;
            z-index:1000;
            display:none;
        }
        #login{
            position:fixed;
            left:25%;
            top:25%;
            z-index:1001;
        }
        .loginCon{
            width:670px;
            height:380px;
            background:#fff;
            position:relative;
        }
        .loginCon .close{
            width:40px;
            color:#fff;
            position: absolute;
            right:10px;
            top:10px;
        }
    </style>
</head>
<body>
<a class="btn-log" onclick="popUp();">弹出层效果</a>
<div class="con"></div>
<div id="mask">
    <div id="login">
        <div class="loginCon">
            <a class="close" onclick="closeBtn();">关闭</a>
        </div>
    </div>
</div>
<script>
    window.onload= function () {
        //获取页面的高度
        var screenH=document.documentElement.clientHeight;
        //滚动条滚动高度
        var scrollH=document.documentElement.scrollHeight;
        var oMask=document.getElementById("mask");
        //这样写是在网页特别长，用户拉动滚动条的时候弹出层也要随之变长以覆盖整个页面可视区
        oMask.style.height=screenH+scrollH+"px";
    };
    function popUp(){
        var oMask=document.getElementById("mask");
        oMask.style.display="block";
    }
    function closeBtn(){
        var oMask=document.getElementById("mask");
        oMask.style.display="none";
    }
</script>
</body>
</html>

辣姐什么鬼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript弹出层效果

效果图：（简单实现功能）代码： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹出层效果&lt;/title&gt; &lt;style&gt; a
复制链接

扫一扫