JQ遮罩层弹窗，样式内容可自行修改。复制即可查看效果

从事.Net的xiao学生

已于 2023-02-25 09:04:12 修改

阅读量151

点赞数

分类专栏： Html 文章标签： javascript html 前端

于 2023-02-24 17:18:00 首次发布

本文链接：https://blog.csdn.net/qq_27179087/article/details/129204982

版权

Html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码示例展示了一个使用jQuery创建的弹出层效果，包括黑色遮罩层（black_overlay）和白色内容层（white_content）。当点击按钮时，弹出层显示，用户可以通过点击关闭按钮或背景层来关闭它。弹出层的位置经过计算以居中显示，并且弹出层的高度会随着文档的高度动态调整。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery弹出层效果</title>
    <style>
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }

        /*弹窗样式*/
        .white_content {
            display: none;
            position: absolute;
            top: 15%;
            left: 10%;
            width: 30%;
            height: 60%;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            border: 16px solid lightblue;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
        /*弹窗顶部样式*/
        .close {
            width: 100%;
            height: 5%;
            background: rgb(14, 144, 210);
            padding: 0px 10px;
            text-align: center;
            position: relative;
            line-height: 240%;
            box-sizing: border-box;
            font-size: 15px;
            color: rgb(255, 255, 255);
            font-weight: bold
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        //设置显示窗体剧中
        $(document).ready(function () {
            var getE = $("#MyDiv").innerWidth();
            var getBody = $("body").outerWidth();
            var result = (getBody - getE) / 2 + "px";
            $("#MyDiv").css("left", result);
        });

        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            // bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };
    </script>
</head>
<body>
    <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
    <!--弹出层时背景层DIV-->
    <div id="fade" class="black_overlay">
    </div>
    <!--弹出层时背景层DIV-点击背景关闭-->
    <!--<div id="fade" class="black_overlay" onclick="CloseDiv('MyDiv','fade')">
    </div>-->
    <div id="MyDiv" class="white_content">
        <div class="close" style="text-align: right; cursor: default; height: 40px;">
            <span style="font-size: 16px; cursor: pointer;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>
        <div>
            123
        </div>
    </div>
</body>
</html>