弹出提示框
一、功能
通过特定条件(点击事件、指向事件等)触发提示框功能。可以设置提示信息,显示秒数,自定义弹出符号等。
二、实现思路
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);
})