HTML 弹窗实践

前言 我一开始写页面的时候，用的最多的就是 alert ，但是这只能满足简单需求，一旦你有其它的需求，就无法满足了…… 比如我要实现如下的效果，这里就用到 css 相关只是，但是也并不难实现。

• CSS 代码（也就是背景框）

代码语言：javascript复制

.tbox{
        background-color: rgba(0,0,0,0.6);
        text-align: center;
        width: 350px;
        height: 230px;
        border-radius: 10px;
        position: fixed;
        z-index: 9999;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        color: white;
      }

• HTML 代码应用

代码语言：javascript复制

<div id="tbx" style="display: none">
    <!-- 你的代码 -->
    <p>时间</p>
    <p>可以了解爱情</p>
    <p>可以证明爱情</p>
    <p>也可以推翻爱情</p>
    <p style="text-align: right;margin-right: 2em;">--- 张小娴</p>
</div>

• JS 代码

代码语言：javascript复制

// CSS   HTML 仅实现了输出，但咱们需要做控制，也即是什么时候显示什么时候不显示
/*
网页开始就运行 js 控制代码
延时显示 tbox_1 , 5 秒后 关闭
*/
window.onload = function(){
    // 延迟 2 秒显示
    setTimeout(() => {
        document.getElementById("tbx").style.display="block";
    }, 2000);

    // 延迟 5 秒隐藏
    setTimeout(() => {
        document.getElementById("tbx").style.display="none";
    }, 5000);
}

附上效果

• 说明

1. 代码还是比较简单的；
2. 相关样式可以自己调试；

• 源码附件

链接: https://pan.baidu.com/s/1_YgvZd4WUp2oSL38Q55w9g 提取码: ks5h

html display 实践 调试 源码

0 人点赞