html点击按钮跳出消息框

目录

    • 需求
    • 直接上代码
    • 效果
    • 自己试一下,把代码复制一下,点运行

需求

在html中,设计一个按钮,点击后会跳出以可消息框,点击其他地方会关闭.常用于网页门户关于我们的使用

直接上代码

<html>
<head>
    <style>
        /* 定义弹出消息框的样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message-box {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            max-width: 400px;
            text-align: center;
        }
    style>
head>

<body>
    
    <button onclick="showOverlay()">关于我们button>

    
    <div id="overlay" class="overlay" style="display:none;">
        
        <div class="message-box">
            <h3>关于我们h3>
            <p>关于我们的介绍p>
        div>
    div>

    <script>
        // 定义一个函数,用于显示弹出消息框
        function showOverlay() {
            document.getElementById("overlay").style.display = "flex";
        }

        // 点击弹出消息框的容器,会关闭消息框
        document.getElementById("overlay").addEventListener("click", function (e) {
            this.style.display = "none";
        });
    script>
body>

html>

效果

html点击按钮跳出消息框_第1张图片

自己试一下,把代码复制一下,点运行

点击此处自己试一下

你可能感兴趣的:(Web服务,html,前端,css)