JavaScript代碼示例：關閉彈出層

一、什麼是彈出層？

彈出層是指在網頁上彈出的覆蓋於原有頁面內容之上的窗口，是一種常見的網頁設計效果，用於彈窗提示、登錄框等功能需求。通常情況下，點擊頁面上的某個按鈕或鏈接可以觸發彈出層的展示。

二、如何關閉彈出層？

在網頁設計中，用戶需要經常與彈出層進行交互，因此彈出層的關閉操作非常重要。下面提供兩種常見的關閉方式：

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/zh-tw/n/149797.html