需求
最近使用bootstrap时,需要一个弹窗提示用户登录失败。bootstrap提供了alert组件来满足弹窗提示的功能,但是没有自动关闭功能,只提供了一个可以通过点击’ x '号关闭的弹窗。详情:bootstrap警告框。 这样对用户并不太友好,例如elementui中的弹框,显示一段时间后自动消失。起到了提示作用即可。
实现
利用window.setTimeout 延时一定时间后,再关闭弹框。 为弹框添加’ hide ‘类,即默认隐藏。当需要显示时,再添加’ show ‘类,显示弹框。延时一段时间后,去除’ show '类,达到再次隐藏的目的。(这里使用jquery实现)
.alert{
position: fixed;
width: 50%;
margin-left: 20%;
z-index: 2000;
}
$("#btn1").click(function(){
$(".alert-danger").addClass("show");
window.setTimeout(function(){
$(".alert-danger").removeClass("show");
},1000);//显示的时间
})
$("#btn2").click(function(){
$(".alert-success").addClass("show");
window.setTimeout(function(){
$(".alert-success").removeClass("show");
},1000);//显示的时间
})
这里我测试使用鼠标点击事件实现弹框提示,可以根据需求自己更改。例如接收后端传来的参数来显示成功还是失败弹框。
效果
失败提示 成功提示