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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
vue-cli V3.0版本的使用详解
Oct 24 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
python skimage 连通性区域检测方法
2018/06/21 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
小学教师自我鉴定
2013/11/07 职场文书
家长通知书教师评语
2014/04/17 职场文书
优秀求职信
2014/05/29 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python