一个简单的提示框
CSS:
/*提示框*/
.dialog-box {
max-width: 300px;
background-color: #000;
opacity: 0.8;
color: #fff;
padding: 25px 35px;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%);
border-radius: 6px;
display: none;
z-index: 9999;
font-size: 16px;
text-align: center;
}
JS / JQ :
//原生JS:
function showTip(str, t, fun) {
t = t || 1500;
var dom = document.createElement("p");
dom.setAttribute('class', 'dialog-box');
document.body.appendChild(dom);
var _dialog = document.querySelector('.dialog-box')
_dialog.style.display="block";
_dialog.innerHTML = str;
setTimeout(function () {
_dialog.style.display="none";
_dialog.parentNode.removeChild(_dialog);
if (fun) {fun();}
}, t);
}
//或
//用JQ:
function showTip(str, t, fun) {
t = t || 1500;
$(document.body).append("<p class='dialog-box'></p>");
var $dialog = $(".dialog-box");
$dialog.fadeIn().html(str);
setTimeout(function () {
$dialog.fadeOut();
$dialog.remove();
if (fun) {fun();}
}, t);
}
调用:
showTip('这是一个提示框', 2000, function () {
console.log('弹框2秒消失,并执行回调')
});
效果如下:
注:时间和回调参数非必填~
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499251.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步