HTML 弹窗实践

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

CSS 代码（也就是背景框）

.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 代码应用


    
    时间
    可以了解爱情
    可以证明爱情
    也可以推翻爱情
    --- 张小娴

JS 代码

// 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);
}

附上效果动画.gif