遮罩层的小demo，拿来即用

韩淼燃

于 2019-06-14 15:30:25 发布

阅读量364

点赞数

CC 4.0 BY-SA版权

分类专栏：闲聊文章标签：遮罩层

本文链接：https://blog.youkuaiyun.com/weixin_36691991/article/details/91978251

闲聊专栏收录该内容

168 篇文章

订阅专栏

本文展示了一个使用HTML和jQuery实现的弹出窗口效果，包括两个不同颜色的弹窗，并通过点击按钮显示或隐藏这些弹窗。代码中包含了遮罩层和弹出层的样式设置，以及使用jQuery进行事件绑定来控制弹窗的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{padding: 0; margin: 0}
        /*遮罩层*/
        .box{
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            display: none;
        }
        /*弹出层*/
        .box1{
            width: 500px;
            height: 500px;
            position: fixed;left: 50%; top: 25%;
            background: red;
            margin-left: -250px;
            border: 1px solid #000000;
        }
        .box2{
            width: 500px;
            height: 500px;
            position: fixed;left: 50%; top: 25%;
            background: green;
            margin-left: -250px;
            border: 1px solid #000000;
        }
    </style>

</head>
<body>
<div class="box" id="b1">
    <div class="box1">
        <a href="javascript:;" onclick="jQuery('#b1').hide()" class="close">关闭</a>
    </div>
</div>
<div class="box" id="b2">
    <div class="box2">
        <a href="javascript:;" onclick="jQuery('#b2').hide()" class="close">关闭</a>
    </div>
</div>
<a href="javascript:;" onclick="jQuery('#b1').show()" class="show">显示</a>
<a href="javascript:;" onclick="jQuery('#b2').show()" class="show">显示</a>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>