html如何弹出模态窗口

要在HTML中弹出模态窗口，可以使用以下方法：

（图片来源网络，侵删）

1、使用JavaScript和CSS创建一个模态窗口。

2、使用Bootstrap等前端框架提供的模态窗口组件。

下面是一个简单的示例，展示了如何使用纯HTML、CSS和JavaScript创建一个模态窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>模态窗口示例</title>
    <style>
        /* 模态窗口背景 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            zindex: 1; /* 置于顶层 */
            left: 0;
            top: 0;
            width: 100%; /* 全屏宽度 */
            height: 100%; /* 全屏高度 */
            overflow: auto; /* 允许滚动 */
            backgroundcolor: rgba(0, 0, 0, 0.4); /* 半透明黑色 */
        }
        /* 模态窗口内容 */
        .modalcontent {
            backgroundcolor: #fefefe;
            margin: 15% auto; /* 居中显示 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* 宽度 */
        }
        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            fontsize: 28px;
            fontweight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            textdecoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!触发模态窗口的按钮 >
<button id="myBtn">打开模态窗口</button>
<!模态窗口 >
<div id="myModal" class="modal">
    <div class="modalcontent">
        <span class="close">&times;</span>
        <p>这是一个模态窗口！</p>
    </div>
</div>
<script>
    // 获取模态窗口元素
    var modal = document.getElementById("myModal");
    // 获取触发模态窗口的按钮元素
    var btn = document.getElementById("myBtn");
    // 获取关闭按钮元素
    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>

这个示例中，我们创建了一个模态窗口，当用户点击“打开模态窗口”按钮时，模态窗口会显示出来，用户可以点击关闭按钮或者点击模态窗口之外的区域来关闭模态窗口。

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/391412.html

html如何弹出模态窗口

发表回复