html 弹窗

作者：农村混血兒发布日期:2026-07-21 浏览:112

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 弹窗示例</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.5); /* 半透明背景 */
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            text-align: center;
        }

        .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>

<h2>点击按钮显示弹窗</h2>

<!-- 触发弹窗的按钮 -->
<button id="openModalBtn">打开弹窗</button>

<!-- 弹窗内容 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>这是一个简单的 HTML 弹窗示例。</p>
    </div>
</div>

<script>
    // 获取 DOM 元素
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("openModalBtn");
    var span = document.getElementsByClassName("close")[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";
        }
    }
</script>

</body>
</html>

解释说明：

HTML 部分:
- 创建了一个按钮 (<button>) 来触发弹窗。
- 使用 <div> 标签定义了弹窗的内容，并通过 CSS 类 .modal 和 .modal-content 来设置其样式。
CSS 部分:
- .modal 类控制弹窗的整体样式，初始状态下 display: none 表示弹窗是隐藏的。
- .modal-content 类设置了弹窗内部的内容样式，包括背景颜色、边框等。
- .close 类用于定义关闭按钮的样式，并添加了悬停效果。
JavaScript 部分:
- 通过 JavaScript 控制弹窗的显示和隐藏。点击按钮时，弹窗会显示；点击关闭按钮或点击弹窗外部区域时，弹窗会隐藏。

上一篇：html字体居中

下一篇：html 占位符