好看的alert弹窗或样式弹窗

一、引入js和css文件

<link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">

<script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>

直接在head引入：
注意此引用方式不稳定，如果遇到bug，请使用第二种下载的方式引入，如遇到某个元素不显示，或奇怪的bug,第一时间去控制台看元素不显示原因，比如我就遇到一个因为优先级问题成功（success）的弹窗的对号被盖住导致没有正确的动画效果，解决办法为在sweetalert.css中将success图标的z-index改为1或者0

二、js调用替代alert

直接使用swal()函数替代alert函数即可，同时sweetalert还提供更加多样化的弹出框。
1.swal(“开始这个完美的弹出框旅程吧！”)

2、带标题和文本的alert

swal("这是标题！","这是文本")

3、成功的提示，可以带动画效果的哦

swal("这还是标题！","这还是文本","success")

4、带函数传值的alert

    swal({ 
		title: "确定删除吗？", 
		text: "你将无法恢复该虚拟文件！", 
		type: "warning",
		showCancelButton: true, 
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "确定删除！", 
		cancelButtonText: "取消删除！",
		closeOnConfirm: false, 
		closeOnCancel: false	
		},
		function(isConfirm){ 
		if (isConfirm) { 
			swal("删除！", "你的虚拟文件已经被删除。",
		"success"); 
		} else { 
			swal("取消！", "你的虚拟文件是安全的:)",
		"error"); 
		} 
    });

该文章转载自https://blog.csdn.net/windy1001/article/details/82685977
原文出处地址http://mishengqiang.com/sweetalert/添加链接描述