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 封装Ajax传递的数据代码
Jun 05 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
vue实现引入本地json的方法分析
Jul 12 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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获取网络上文件
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
js运动应用实例解析
2015/12/28 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Nike瑞士官网:Nike CH
2021/01/18 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
报名委托书
2015/01/29 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书