好看的alert弹窗或样式弹窗

好看的alert弹窗或样式弹窗

该样式是我网上搜寻的，风格好看又简洁，不失大雅！

就不过多描述了，自己体验一下吧~：点我体验一番

一、引入js和css文件

1、引入js和css文件

直接在head引入：

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

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

2、或者下载之后再引入。
下载链接在文末

二、js调用替代alert

二、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"); 
		} 
    });

5、可以内嵌html代码的alert

    swal({ 
			title: "HTML <small>标题</small>!",
			text: "自定义<span style='color:#0000FF'>这是蓝色的<span>。", 
			html: true 
		});

附：

js+css下载地址：点我下载

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