js 优化消息提示框

王家五哥

于 2023-01-10 11:11:29 发布

阅读量144

点赞数

分类专栏： js小工具文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36521848/article/details/128626418

版权

js小工具专栏收录该内容

32 篇文章 0 订阅

订阅专栏

简介：

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

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

效果展示：

代码示例：

<!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>