JavaScript特效——弹窗3秒后消失

JavaScript特效——弹窗3秒后消失

此为用JavaScript中的jquery实现的一个小特效,一般的应用场景为在网页中用户操作完之后,网页做出的响应或者提示,页面顶部弹窗三秒后消失。具体的实现步骤如下:

1、在页面中写一个div为弹窗,

2、修改其css样式,正常情况下为隐藏,固定定位,设置宽度占页面的60%

#alertMessage {

position: fixed;

top: 30px;

left: 20%;

right: 20%;

padding: 20px 30px;

background: rgba(0, 0, 0, 0.6);

color: #ffffff;

font-size: 20px;

text-align: center;

z-index: 999;

display: none;

}

3、当页面中需要其弹窗显示时,触发显示函数

function alertmess(mess) {

$('#alertMessage').html(mess); // 填入要显示的文字

$('#alertMessage').show(); // 显示弹框

setTimeout(function () { // 倒计时

$('#alertMessage').html(''); // 清空文本

$('#alertMessage').hide(); // 隐藏弹框

}, 3000); // 3秒

}

4、当页面中需要弹窗时,直接调用即可。

alertmess("请填写用户名!")

5、到这里就结束啦。

相关推荐

《方舟 生存进化》石头获取方法及用途介绍
如何在文档中自动生成页码:详细技巧与指导
2023年女足世界杯赛程表(2023女足世界杯详细赛程发布)