JavaScript SweetAlert插件实现超酷消息警告框


Posted in Javascript onJanuary 28, 2016

今天给大家推荐一款不错的超酷消息警告框?SweetAlert;SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。和传统的alert相比:

JavaScript SweetAlert插件实现超酷消息警告框

SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义。接下来看看它的具体使用!

HTML

首先引入相应的js和css,该插件不需要jQuery插件的支持:

<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.css"/>
<script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

然后放置6个不同的按钮:

<div class="demo_1">
基本示例:<button>点击这里</button> 
</div>
<div class="demo_2">
提示成功:<button>点击这里</button> 
</div>
<div class="demo_3">
提示失败:<button>点击这里</button> 
</div>
<div class="demo_4">
提示确认:<button>点击这里</button> 
</div>
<div class="demo_5">
定义内容:<button>点击这里</button> 
</div>
<div class="demo_6">
确认输入:<button>点击这里</button> 
</div>

JavaScript

定义js事件:

$(function() {
$(".demo_1 button").click(function() {
swal("这是一个信息提示框!");
});
$(".demo_2 button").click(function() {
swal("Good!", "弹出了一个操作成功的提示框", "success");
});
$(".demo_3 button").click(function() {
swal("OMG!", "弹出了一个错误提示框", "error");
});
$(".demo_4 button").click(function() {
swal({
title: "您确定要删除吗?",
text: "您确定要删除这条数据?",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的,我要删除",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "do.php",
type: "DELETE"
}).done(function(data) {
swal("操作成功!", "已成功删除数据!", "success");
}).error(function(data) {
swal("OMG", "删除操作失败了!", "error");
});
});
});

$(".demo_5 button").click(function() {
swal({
title: "Good!",
text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',
imageUrl: "images/thumbs-up.jpg",
html: true,
timer: 5000,
showConfirmButton: false
});
});

$(".demo_6 button").click(function() {
swal({
title: "输入框来了",
text: "这里可以输入并确认:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "填点东西到这里面吧"
}, function(inputValue) {
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("请输入!");
return false
}
swal("棒极了!", "您填写的是: " + inputValue, "success");
});
});
});
Javascript 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
微信小程序实现手指触摸画板
Jul 09 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 #Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 #Javascript
Angular实现form自动布局
Jan 28 #Javascript
理解javascript中的MVC模式
Jan 28 #Javascript
jQuery获取checkbox选中的值
Jan 28 #Javascript
探讨JavaScript语句的执行过程
Jan 28 #Javascript
Javascript复制实例详解
Jan 28 #Javascript
You might like
十天学会php(1)
2006/10/09 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
PHP之header函数详解
2021/03/02 PHP
Javascript中string转date示例代码
2013/11/01 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python__name__原理及用法详解
2019/11/02 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
什么是GWT的Module
2013/01/20 面试题
高三自我鉴定范文
2013/10/19 职场文书
应届护士推荐信
2013/11/16 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
2014年端午节活动方案
2014/03/11 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
高一军训决心书
2015/02/05 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js