js 优化消息提示框

柔光的暖阳◎ 2023-09-26 17:43 127阅读 0赞

**简介：**

消息提示框 alert, 每次提示都需要用户点一下，比较麻烦

优化改进：自动弹框提示，几秒钟后自动消失

**效果展示：**

![9db49afbd6ae4e0486be59d9f8d162a0.png][]

**代码示例：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>优化消息提示框</title>
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    		<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    	</head>
    	<body>
    
    		插件官方地址：https://codeseven.github.io/toastr/ <br />
    		插件示例地址： https://codeseven.github.io/toastr/demo.html -->
    	</body>
    	<script>
    		toastr.options.positionClass = 'toast-top-center';
    		
    		//调用方式
    		toastr.error("错误");
    		toastr.success("成功");
    		toastr.warning("失败");
    		toastr.info("你好");
    	</script>
    </html>

[9db49afbd6ae4e0486be59d9f8d162a0.png]: https://img-blog.csdnimg.cn/9db49afbd6ae4e0486be59d9f8d162a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 优化消息提示框

简介：消息提示框 alert, 每次提示都需要用户点一下，比较麻烦优化改进：自动弹框提示，几秒钟后自动消失效果展示： ![9db49afbd6ae4e0486be

柔光的暖阳◎/ 2023年09月26日 17:43/ 0 赞/ 128 阅读

相关 jQuery消息提示框插件Tipso

之前我们分享过很多漂亮的Tooltip提示框插件，比如这款带Tooltip表单验证的注册表单。今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是

快来打我*/ 2022年08月05日 15:11/ 0 赞/ 249 阅读

相关 Toastr消息提示框的使用

toastr是一个基于jQuery简单、漂亮的消息提示插件，使用简单、方便，可以根据设置的超时时间自动消失。 1、使用很简单，首选引入toastr的js、css文件

向右看齐/ 2022年06月10日 00:28/ 0 赞/ 235 阅读

相关自定义AlertDialog消息提示框

自定义AlertDialog消息提示框，大家根据我的代码自行扩展。下图是威哥做的demo消息提示效果图： ![70][] 威哥不喜欢废话，直接上代码。 1、消息提示jav

川长思鸟来/ 2022年05月12日 02:50/ 0 赞/ 348 阅读

相关消息框-提示框

今天找到一个非常简单的提示消息弹出框直接上代码 html ![1500786-20181012154016519-1839245572.png][] css

迷南。/ 2021年09月29日 23:38/ 0 赞/ 467 阅读

相关 JavaScript 原生js实现自定义消息提示框

效果图 ![js自定义消息弹框][js] 上代码 <!DOCTYPE html> <html lang="en"> <head>

痛定思痛。/ 2021年09月21日 13:08/ 0 赞/ 423 阅读

相关 ExtJs 消息提示框介绍

一、javascript中的提示框在Ext.MessageBox中的展现 ![18111233-103ee93936e14e8ea181f8283e401255.png][]

淩亂°似流年/ 2021年09月14日 10:46/ 0 赞/ 701 阅读

相关 Bootstrap智能消息提示框

Bootstrap智能消息提示框。 “我觉得操作成功后，需要一个弹出提示框”，客户说。 “需要吗？我觉得没必要，错误的时候提示，成功时自动跳转就行了！”，我弱弱的答。

柔光的暖阳◎/ 2021年09月10日 15:26/ 0 赞/ 501 阅读

相关重构-消息提示框

动画: 消息下滑出现点击消息上移消失消失时后面所有消息框上移滑动实现: seed消息个数 i

淡淡的烟草味﹌/ 2021年07月25日 01:58/ 0 赞/ 562 阅读

相关 js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！

目录闲言效果图：语法参数说明：完整代码欢迎交流指导！！ -------------------- 闲言周

系统管理员/ 2021年07月24日 16:27/ 0 赞/ 550 阅读