HTML 弹窗实践

爱技术的小黄鸭

发布于 2023-06-15 14:58:35

4820

发布于 2023-06-15 14:58:35

文章被收录于专栏：IT小圈

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

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

<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 代码

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

附上效果