JavaScript代码示例：关闭弹出层

FZSS • 2024-11-05 16:54 • 编程

一、什么是弹出层？

弹出层是指在网页上弹出的覆盖于原有页面内容之上的窗口，是一种常见的网页设计效果，用于弹窗提示、登录框等功能需求。通常情况下，点击页面上的某个按钮或链接可以触发弹出层的展示。

二、如何关闭弹出层？

在网页设计中，用户需要经常与弹出层进行交互，因此弹出层的关闭操作非常重要。下面提供两种常见的关闭方式：

1.使用JavaScript调用关闭方法

<script>
    // 通过窗口对象 window 对象的 close() 方法可以关闭窗口。
    window.close();
</script>

上面的代码是通过窗口对象的 close() 方法来关闭当前窗口。如果弹窗是通过 window.open() 方法打开的，则可以通过 window.opener 关闭弹窗来返回到原页面：

<script>
    // 通过 window.opener 关闭弹窗，返回原页面
    window.opener=null; 
    window.close();
</script>

2.使用jQuery调用关闭方法

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    // 通过 jQuery 绑定对应元素的 click 事件来关闭弹窗
    $('#close-btn').click(function(){
        window.parent.$('#pop-up-box').fadeOut(); //通过 window.parent 获取父窗口中的元素
    });
</script>

上面的代码是通过绑定弹窗中关闭按钮的 click 事件来关闭弹窗，其中 window.parent.$(‘#pop-up-box’) 是获取父窗口中的指定元素，通过 .fadeOut() 方法实现弹窗渐隐的效果。

三、代码示例

下面是完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关闭弹出层示例</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 点击打开弹出层按钮
            $('#open-btn').click(function(){
                $('#pop-up-box').fadeIn(); // 显示弹出层
            });
            // 点击关闭弹出层按钮
            $('#close-btn').click(function(){
                window.parent.$('#pop-up-box').fadeOut(); // 通过 window.parent 获取父窗口中的元素
            });
        });
    </script>
</head>
<body>
    <p><a href="#" id="open-btn">打开弹出层</a></p>
    <div id="pop-up-box" style="display:none">
        <div><a href="#" id="close-btn">关闭</a></div>
        <p>这里是弹出层的内容</p>
    </div>
</body>
</html>

上面的代码实现了一个简单的弹出层效果，用户点击“打开弹出层”链接时，会出现一个弹出层，其中包含一个“关闭”链接，通过点击“关闭”链接可以关闭弹出层。

原创文章，作者：FZSS，如若转载，请注明出处：https://www.506064.com/n/149797.html