JavaScript SweetAlert插件实现超酷消息警告框
投稿：mrr
SweetAlert是一款使用纯js制作的消息警告框插件.这篇文章主要介绍了JavaScript SweetAlert插件实现超酷消息警告框的相关资料,需要的朋友可以参考下
今天给大家推荐一款不错的超酷消息警告框–SweetAlert；SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。和传统的alert相比：
SweetAlert 能在页面自动居中，支持桌面环境，移动端和平板，并且高度自定义。接下来看看它的具体使用！
首先引入相应的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 class="demo_2">
提示成功：<button>点击这里</button>
<div class="demo_3">
提示失败：<button>点击这里</button>
<div class="demo_4">
提示确认：<button>点击这里</button>
<div class="demo_5">
定义内容：<button>点击这里</button>
<div class="demo_6">
确认输入：<button>点击这里</button>
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");
js关闭浏览器时退出账号的处理
2021-11-11
JavaScript之BOM构成和常用事件详解
2021-11-11
手把手教你用Javascript实现观察者模式
2021-11-11
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版
-
返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
