700字范文 > 好看的alert弹窗或样式弹窗

好看的alert弹窗或样式弹窗

时间：2019-03-30 03:36:11

相关推荐

好看的alert弹窗或样式弹窗

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

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

一、引入js和css文件

1、引入js和css文件

直接在head引入：

<link rel="stylesheet" type="text/css" href="/css/sweetalert.css"><script type="text/javascript" src="/js/sweetalert-dev.js"></script>

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

2、或者下载之后再引入。

下载链接在文末

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