欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript SweetAlert插件实现超酷消息警告框_javascript技巧

程序员文章站 2022-03-17 23:50:48
...
今天给大家推荐一款不错的超酷消息警告框–SweetAlert;SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。和传统的alert相比:

JavaScript SweetAlert插件实现超酷消息警告框_javascript技巧

SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义。接下来看看它的具体使用!

HTML

首先引入相应的js和css,该插件不需要jQuery插件的支持:

然后放置6个不同的按钮:

基本示例:
提示成功:
提示失败:
提示确认:
定义内容:
确认输入:

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: '自定义图片HTML内容
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"); }); }); });