SweetAlert - 演示6种不同的提示框效果

查看演示 下载资源 下载积分： 35 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先放置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>

接着引入sweetalert相关组件，该插件不需要jQuery库支持。

<script src="sweetalert.min.js"></script> 
<link rel="stylesheet" href="sweetalert.css">

我们先看下前三种js，其余请看压缩文件的代码。

$(".demo_1 button").click(function() {
    swal("这是一个信息提示框!");
});
$(".demo_2 button").click(function() {
    swal("Good!", "弹出了一个操作成功的提示框", "success");
});
$(".demo_3 button").click(function() {
    swal("OMG!", "弹出了一个错误提示框", "error");
});

警告框提示

swal({
    title: "您确定要删除吗？",
    text: "您确定要删除这条数据？",
    type: "warning",
    showCancelButton: true,
    closeOnConfirm: false,
    confirmButtonText: "是的，我要删除",
    confirmButtonColor: "#ec6c62"
}, function() {
    $.post(getUrl("Cart/del"), {id: id}, function(data) {
        location.reload();
    })
});

提示：本地sweetalert可能不支持IE8，但放在服务器就OK了，保证网页html能支持w3c标准即可。

SweetAlert相关API