本文介绍一款无需jQuery依赖的原生JavaScript提示框插件SweetAlert。该插件风格类似Bootstrap，支持桌面及移动端自动居中，提供高度自定义功能，包括设置标题、类型、图片、按钮文本及回调函数。通过引入CSS和JS文件，开发者可轻松实现信息、成功、错误、确认及输入等多种样式的警告框，提升用户交互体验。
SweetAlert插件介绍
今天向大家推荐一款视觉效果出色的消息提示插件——SweetAlert。这是一款基于原生JavaScript开发的提示框库，无需依赖jQuery即可运行，其界面风格与Bootstrap相似。该插件不仅外观精美，还具备高度的可定制性，支持配置提示框标题、类型、内容图片、确认与取消按钮的文字以及点击后的回调函数等，相较于传统的alert方法，体验更佳。
SweetAlert能够自动在页面中居中显示，兼容桌面端环境，同时也完美适配移动端和平板设备，并支持深度自定义。接下来我们将具体演示其使用方法。
HTML结构
HTML引入与按钮配置
首先需要在页面中引入相应的JavaScript和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>随后在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>JavaScript逻辑
JavaScript事件定义
接下来定义具体的JavaScript事件处理代码。
$(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");
});
});
});