此为用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、到这里就结束啦。