弹窗（弹出层）

最新推荐文章于 2021-11-11 18:24:57 发布

Mason丶Liu

最新推荐文章于 2021-11-11 18:24:57 发布

阅读量317

点赞数

分类专栏： html 文章标签：弹窗

本文链接：https://blog.youkuaiyun.com/Superman_xing/article/details/80481985

版权

html 专栏收录该内容

4 篇文章

订阅专栏

弹窗样式

这里写图片描述

<html>  
<head>  
<title>弹出层</title>  
<meta charset="utf-8">
<style>  
    .mask_class{
        background:black;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
        opacity:0.3;
        filter:alpha(opactity:30);
        z-index:1001;
        display:none;
    }
    .dialog{
        background:#fff;
        width:50%;
        height:60%;
        position:absolute;
        top:20%;
        left:24%;
        z-index:1002;
        border: 16px solid lightblue; 
        overflow:auto;
        display:none;
    }
    .close_div{
        text-align:right;
        cursor:default;
    }
</style>  
<script>
    window.onload= function(){  
        //关闭窗口
        document.getElementById("close_dialog").onclick = function(){
            document.getElementById("mask_id").style.display = "none";
            document.getElementById("dislog_id").style.display = "none";
        }
    }

    //打开窗口
    function show_dialog(bg,show){
        document.getElementById(bg).style.display = "block";
        document.getElementById(show).style.display = "block";
    }

</script>
</head>  
<body>  
    <span style="cursor:default;" onclick="show_dialog('mask_id','dislog_id')">弹出</span>
    <div class="mask_class" id="mask_id"></div>
    <div class="dialog" id="dislog_id">
        <div class="close_div" ><span id="close_dialog">关闭<span></div>
        <div>this is mask</div>
    </div>
</body>  
</html>