css 遮罩层

最新推荐文章于 2024-05-30 16:48:43 发布

青天魔王

最新推荐文章于 2024-05-30 16:48:43 发布

阅读量409

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/leixu1027/article/details/102583771

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

css遮罩层涉及了div的定位固定和居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        .showModel{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
        }

        .modelBox{
            width: 600px;
            height: 300px;
            background-color: #ffffff;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div>
    <button id="isModel">遮罩层</button>
</div>
<div id="model" class="showModel">
    <div id="content" class="modelBox">
        11111
    </div>
</div>
</body>
<script src="jquery.js"></script>
<script>
    $(document).ready(function() {
        $("#isModel").click(function () {
            $("#model").show()
        });

        $("#model").click(function () {
            $("#model").hide()
        });

        $("#content").click(function (e) {
            e.stopPropagation()
        });
    })
</script>
</html>

青天魔王

关注

1
点赞
踩
1

收藏

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

css遮罩层涉及了div的定位固定和居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:...
复制链接

扫一扫