【javaScript】消息弹出框--适用web端&移动端

弹出提示框

一、功能

通过特定条件（点击事件、指向事件等）触发提示框功能。可以设置提示信息，显示秒数，自定义弹出符号等。

二、实现思路

1、封装函数

定义函数进行功能的封装

2、封装思路

创建标签容器，容纳内容，进行样式设置等

给已经创建的标签添加类名，进行样式的控制

定义字符串变量，进行组件内容的拼接

将值赋值给创建好的标签

获取body标签，通过appendChild方法将标签添加到body标签中

通过传入的值设置延时器，触发条件后移除组件

3、代码

以点击事件触发弹出框

<!--触发事件的html-->
<button id="btn">点击触发弹窗</button>

/* 提示框 */
.tatol {
    position: absolute;
    top: calc(50% - 75px);
    right: calc(50% - 75px);
    padding: 15px;
    border-radius: 5px;
    width: 150px;
    height: 150px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
}

/* 状态提示框 */
.stat {
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    text-align: center;
}

/* 提示信息 */
.infoText {
    text-align: center;
    height: 40px;
    line-height: 20px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*组件的封装*/
/**
 * @tatol 封装弹窗组件
 * @status 状态 1！ 0√
 * @text string 提示文本
 * @timer number 提示框显示时间
 */
tatol = function (status, text, timer = 1) {
    let tatol = document.createElement("div");
    tatol.className = 'tatol';
    let html = `
        <div class="stat">${status ? '!' : '√'}</div>
        <div class="infoText">${text}</div>
    `;
    tatol.innerHTML = html;
    document.querySelector("body").appendChild(tatol);
    setTimeout(function () {
        tatol.remove();
    }, timer * 1000)
}

/*组件的调用*/
        let btn = document.querySelector('#btn');
        btn.addEventListener('click', function () {
            // 参数1   0：√  1：！
            // 参数2   提示信息
            // 参数3   显示的秒数，结束自动隐藏
            tatol(0, '弹窗显示', 3);
        })