CSS JS点击弹出网页窗口(可用于注册账号等场景)

最新推荐文章于 2024-08-20 09:57:53 发布

原创最新推荐文章于 2024-08-20 09:57:53 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

35 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

本文介绍了一个简单的HTML弹窗实现方案，包括HTML结构、JavaScript交互逻辑和CSS样式设计。通过按钮触发，显示和隐藏带有背景遮罩的弹窗，内含可滚动的长文本和底部内容。

弹窗效果如下:
在这里插入图片描述 html和JS的代码如下:

    <button id="open_btn" class="btn">弹窗</button>
    Bruce测试测试测试

    <!-- 弹窗内容开始 -->
    <div id="background">

        <div id="div1">

            <div> 
                <span id="close-button">关闭</span> 
            </div>

            <div id="div2">
                <p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
                    ipsum dolor sit ametLorem ipsum dolor sit
                     ametLorem ipsum dolor sit amet.
                    sit ametLorem ipsum dolor sit ametLorem 
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
                    ipsum dolor sit ametLorem ipsum dolor sit
                     ametLorem ipsum dolor sit ame
                    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem
                    ipsum dolor sit ametLorem ipsum dolor sit
                    ametLorem ipsum dolor sit amet.
                    sit ametLorem ipsum dolor sit ametLorem
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem
                    ipsum dolor sit ametLorem ipsum dolor sit ametLorem
                    ipsum dolor sit ametLorem ipsum dolor sit
                    ametLorem ipsum dolor sit amet</p>
            </div>

            <div id="foot">
                底部内容
            </div>

        </div>

    </div>
    <!-- 弹窗内容结束 -->
    <script>
        var btn = document.getElementById('open_btn');
        var background = document.getElementById('background');
        var close = document.getElementById('close-button');

        btn.onclick = function show() {
            background.style.display = "block";
        };
        close.onclick = function close() {
            background.style.display = "none";
        };
    </script>

CSS代码如下:

    <style>

    /* 弹窗后,网页的背景 */
    #background {
        /* 默认隐藏不显示 */
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* 如果使用下面这个参数,一旦弹框后,背景的内容就看不到了. */
        /* background-color:darkgrey; */
    }
    
    /* 弹窗页面的背景 */
    #div1 {
        /* 弹窗的背景颜色 */
        background:#eeeeee;
        /* 弹出页面的宽度 */
        width: 40%;

        /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
        z-index: 1;
        /* 弹窗的位置,左边数字为top距离,右边的为left距离 */
        margin: 10% auto;
    }

    #div2 {
        margin: auto;
        /* 弹出页面高度,如果不固定高度,高度会以实际内容扩展 */
        height: 150px;
        padding: 10px;

        /* 
            属性规定当内容溢出元素框时发生的事情。
            如果内容超出，则浏览器会显示滚动条以便查看其余的内容。
        */
        overflow: auto;
    }

    #close-button {
        /* 鼠标放上去有游标 */
        cursor: pointer;
        /* 字体在最右边显示 */
        /* float: right; */
        font-size: 20px;
    }
</style>