<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示：SweetAlert - 演示6种不同的提示框效果</title>
<meta name="keywords" content="提示框插件,SweetAlert" />
<meta name="description" content="SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。" />
<link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
<link rel="stylesheet" type="text/css" href="sweetalert.css"/>
<style>
.demo{width:300px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
.demo{width:500px; margin:60px auto 10px auto}
}
button, .button {
background-color: #AEDEF4;color: white;border: none;box-shadow: none;
font-size: 17px;font-weight: 500;font-weight: 600;
border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 5px;cursor: pointer; }
button:hover, .button:hover {background-color: #a1d9f2; }
</style>
</head>
<body>
<div class="head">
<div class="head_inner clearfix">
<ul id="nav">
<li><a href="http://www.sucaihuo.com">首 页</a></li>
<li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
<li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
<li><a href="http://www.sucaihuo.com/php">PHP</a></li>
<li><a href="http://www.sucaihuo.com/site">精选网址</a></li>
</ul>
<a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
</div>
</div>
<div class="container">
<div class="demo">
<h2 class="title"><a href="http://www.sucaihuo.com/js/190.html">教程：SweetAlert - 多功能提示框插件</a></h2>
<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>
</div>
</div>
<div class="foot">
Powered by sucaihuo.com 本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
</div>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="sweetalert.min.js"></script>
<script>
$(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");
});
});
});
</script>
</body>
</html>
SweetAlert 提示框 带6种demo
需积分: 33 154 浏览量
2015-12-21
13:57:58
上传
评论
收藏 70KB ZIP 举报
SweetAlert - 演示6种不同的提示框效果.zip （5个子文件） 
SweetAlert - 演示6种不同的提示框效果 images 
thumbs-up.jpg 29KB
sweetalert-dev.js 114KB sweetalert.css 18KB sweetalert.min.js 16KB
index.html 6KB资源评论
