BootStrap弹出框实现自动关闭(延时)

BootStrap弹出框实现自动关闭(延时)

需求

最近使用bootstrap时,需要一个弹窗提示用户登录失败。bootstrap提供了alert组件来满足弹窗提示的功能,但是没有自动关闭功能,只提供了一个可以通过点击’ x '号关闭的弹窗。详情:bootstrap警告框。 这样对用户并不太友好,例如elementui中的弹框,显示一段时间后自动消失。起到了提示作用即可。

实现

利用window.setTimeout 延时一定时间后,再关闭弹框。 为弹框添加’ hide ‘类,即默认隐藏。当需要显示时,再添加’ show ‘类,显示弹框。延时一段时间后,去除’ show '类,达到再次隐藏的目的。(这里使用jquery实现)

Document

这是一个失败提示!

这是一个成功提示!



这里我测试使用鼠标点击事件实现弹框提示,可以根据需求自己更改。例如接收后端传来的参数来显示成功还是失败弹框。

效果

失败提示 成功提示

相关推荐

闲鱼新账号作品审核时间及审核未通过的常见原因解析
以品牌新力量引领品质新生活 以品牌建设推动高质量发展——写在第七个中国品牌日到来之际
欧路词典|英汉-汉英词典 游泳是什么意思
手机彩票365网址

欧路词典|英汉-汉英词典 游泳是什么意思

07-31 👁️ 8598