jQuery DIV弹出效果实现代码

当需要在页面中展示一些提示信息、弹出层等时，我们可以通过jQuery的DIV弹出效果来实现。下面是实现该效果的完整攻略：

1. 准备工作

在进行代码编写前，我们需要先引入jQuery库和样式文件，同时也要写好弹出层的HTML代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery DIV弹出效果实现</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
        }
        .popup {
            z-index: 10000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <button id="show-popup">弹出层</button>
    <div class="mask"></div>
    <div class="popup" style="display:none;">
        <h2>标题</h2>
        <p>内容</p>
        <button id="close-popup">关闭</button>
    </div>
</body>
</html>

代码中，mask为遮罩层，popup为弹出层，这里采用了绝对定位来使其居中显示。

2. 弹出层效果实现

首先，我们需要定义一个函数来实现弹出层的显示效果。

function showPopup() {
    $('.mask').fadeIn();
    $('.popup').fadeIn();
}

上面的函数中，我们通过fadeIn()方法实现了弹出层的淡入效果。

接下来，在按钮点击事件中调用该函数即可。

$(document).ready(function(){
    $('#show-popup').click(function() {
        showPopup();
    });
});

这里我们使用了jQuery的$(document).ready()方法来保证页面加载完成后再执行弹出层的事件绑定。

3. 关闭弹出层

我们还需定义一个函数来实现关闭弹出层的效果：

function closePopup() {
    $('.mask').fadeOut();
    $('.popup').fadeOut();
}

上面的函数中，我们通过fadeOut()方法实现了弹出层的淡出效果。

接下来，在关闭按钮的点击事件中调用该函数即可。

$(document).ready(function(){
    $('#close-popup').click(function() {
        closePopup();
    });
});

这里注意，关闭按钮的id需要与上面的HTML中定义的id一致。

4. 完整代码

将上述代码组合起来，得到如下完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery DIV弹出效果实现</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
        }
        .popup {
            z-index: 10000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <button id="show-popup">弹出层</button>
    <div class="mask"></div>
    <div class="popup" style="display:none;">
        <h2>标题</h2>
        <p>内容</p>
        <button id="close-popup">关闭</button>
    </div>
    <script>
        function showPopup() {
            $('.mask').fadeIn();
            $('.popup').fadeIn();
        }

        function closePopup() {
            $('.mask').fadeOut();
            $('.popup').fadeOut();
        }

        $(document).ready(function(){
            $('#show-popup').click(function() {
                showPopup();
            });

            $('#close-popup').click(function() {
                closePopup();
            });
        });
    </script>
</body>
</html>

5. 示例

为了更好的说明DIV弹出效果实现，在这里我们补充两个简单的拓展例子。

点击其他部分关闭弹出层

当用户在空白区域点击时，我们也希望能够关闭弹出层。这时，我们需要在弹出层的外部再加上一层容器。

修改HTML代码如下：

<div class="outer">
    <button id="show-popup">弹出层</button>
    <div class="mask"></div>
    <div class="popup" style="display:none;">
        <h2>标题</h2>
        <p>内容</p>
        <button id="close-popup">关闭</button>
    </div>
</div>

然后，我们需要修改Javascript代码如下：

$(document).ready(function(){
    $('#show-popup').click(function() {
        showPopup();
    });

    $('#close-popup').click(function() {
        closePopup();
    });

    $('.outer').click(function(e) {
        if (!$(e.target).closest('.popup').length) {
            closePopup();
        }
    });
});

这里我们添加了一个点击事件在outer上，然后在事件处理函数中判断点击区域是否为popup，如果不是就关闭弹出层。

阻止弹出层内容冒泡

当弹出层中有一些事件需要阻止冒泡时，我们可以使用如下代码来实现：

$(document).ready(function(){
    $('#show-popup').click(function() {
        showPopup();
    });

    $('#close-popup').click(function() {
        closePopup();
    });

    $('.popup').click(function(e) {
        e.stopPropagation();
    });
});

这里我们添加了一个点击事件在popup上，然后使用e.stopPropagation()方法来阻止冒泡。这样当点击弹出层内容时，就不会触发外层元素的点击事件了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery DIV弹出效果实现代码 - Python技术站