html代码弹框

HTML代码弹框是web开发中常见的交互效果，通过弹出窗口的方式展示提示信息或用户输入框。常常用于用户注册、登录、购物等场景。

!DOCTYPE html>
    html>
    head>
        meta charset="utf-8">
        title>
    HTML弹框/title>
        style>
        /*定义弹框的样式*/        .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.5);
                z-index: 1000;
                display: none;
        }
        .popup {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background-color: #fff;
                padding: 20px;
                z-index: 1001;
                display: none;
        }
        /style>
    /head>
    body>
        h1>
    点击按钮弹出弹框/h1>
        button id="btn">
    点击弹出弹框/button>
        div class="overlay">
    /div>
        div class="popup">
            h2>
    提示信息/h2>
            p>
    请输入您的用户名：/p>
            input type="text" placeholder="请输入用户名">
            br>
    br>
            button>
    确定/button>
            button>
    取消/button>
        /div>
        script>
            const btn = document.querySelector('#btn');
            const overlay = document.querySelector('.overlay');
            const popup = document.querySelector('.popup');
            const cancelBtn = document.querySelector('.popup button:last-child');
            //点击按钮弹出弹框        btn.addEventListener('click', () =>
 {
                overlay.style.display = 'block';
                popup.style.display = 'block';
        }
    );
            //点击取消按钮关闭弹框        cancelBtn.addEventListener('click', () =>
 {
                overlay.style.display = 'none';
                popup.style.display = 'none';
        }
    );
        /script>
    /body>
    /html>
    

以上是一个简单的HTML弹框示例，通过CSS定义了弹框的样式并使用JavaScript实现了弹框的弹出和关闭功能。使用HTML代码弹框能够提升用户体验，增加网站的交互性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！