js点击后弹出窗口

在JavaScript中，实现点击后弹出窗口通常使用window.open()方法或者通过DOM操作触发模态框（Modal）的显示。以下是两种常见的方法：

方法一：使用`window.open()`

window.open()方法可以打开一个新的浏览器窗口或标签页，并加载指定的URL。

基础概念：

window.open(url, windowName, [windowFeatures])：打开一个新的浏览器窗口或标签页。
- url：要加载的URL地址。
- windowName：窗口的名称。
- windowFeatures：可选参数，用于指定新窗口的特性（如宽度、高度、是否显示工具栏等）。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window Open Example</title>
</head>
<body>
    <button onclick="openNewWindow()">点击打开新窗口</button>

    <script>
        function openNewWindow() {
            window.open('https://www.example.com', '_blank', 'width=600,height=400');
        }
    </script>
</body>
</html>

优势：

简单直接，易于实现。
可以指定新窗口的特性。

应用场景：

需要打开外部链接或外部网站时。
需要用户在新窗口中查看某些信息时。

方法二：使用模态框（Modal）

模态框是一种在当前页面上显示的弹出窗口，通常用于显示额外的信息或进行用户交互。

基础概念：

使用HTML和CSS创建模态框的结构和样式。
使用JavaScript控制模态框的显示和隐藏。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modal Example</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 {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="openModal()">点击打开模态框</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <p>这是一个模态框！</p>
        </div>
    </div>

    <script>
        function openModal() {
            document.getElementById('myModal').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('myModal').style.display = 'none';
        }

        // 点击模态框外部区域关闭模态框
        window.onclick = function(event) {
            if (event.target == document.getElementById('myModal')) {
                closeModal();
            }
        }
    </script>
</body>
</html>

优势：