js点击关闭弹窗

在JavaScript中实现点击关闭弹窗的功能，通常涉及到DOM操作和事件监听。以下是一个基础的示例，展示了如何创建一个简单的弹窗，并通过点击按钮来关闭它：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关闭弹窗示例</title>
    <style>
        /* 弹窗样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4); /* 背景遮罩 */
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <p>这是一个弹窗！</p>
    </div>
</div>

<button id="openModalBtn">打开弹窗</button>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

// 获取元素
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
var span = document.getElementsByClassName("close-btn")[0];

// 打开弹窗
btn.onclick = function() {
    modal.style.display = "block";
}

// 关闭弹窗
span.onclick = function() {
    modal.style.display = "none";
}

// 点击窗口外部关闭弹窗
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

解释

HTML部分:
- 创建了一个包含弹窗内容的<div>元素，并设置其初始状态为隐藏（display: none）。
- 添加了一个按钮用于打开弹窗。

CSS部分:
- 定义了弹窗的基本样式，包括背景遮罩、内容框和关闭按钮的样式。
JavaScript部分:
- 获取弹窗、按钮和关闭按钮的DOM元素。
- 为按钮添加点击事件监听器，点击时显示弹窗。
- 为关闭按钮添加点击事件监听器，点击时隐藏弹窗。
- 为窗口添加点击事件监听器，点击窗口外部区域时隐藏弹窗。