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_09_Function与Object
Oct 16 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
微信小程序 导入图标实现过程详解
Oct 11 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
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jQuery选择器全面总结
2014/01/06 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
js实现文本框选中的方法
2015/05/26 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
学期自我鉴定范文
2013/10/01 职场文书
高中学生期末评语
2014/04/25 职场文书
踏青活动策划方案
2014/08/19 职场文书
自我推荐信怎么写
2015/03/24 职场文书
中学教师读书笔记
2015/07/01 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android