一个比较好看的弹窗插件
——收集记录
提示框内容比较好看 还有动画。里面function中可以写ajax代码 进行前后端交互
这是一个bootstrap的扩展。在github上发现的
只需导入 sweetalert.js 和 sweetalert.css 当然 还有bootstrap.css 和 jquery
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="/static/sweetalert.min.js"></script>
<link rel="stylesheet" href="/static/sweetalert.css">
<script src="/static/jquery-3.2.1.min.js"></script>
</head>
<body>
<button class="btn btn-info" id="btn1">点我有惊喜</button>
<button class="btn btn-info" id="btn2">点我有惊喜</button>
<button class="btn btn-info" id="btn3">点我有惊喜</button>
<button class="btn btn-info" id="btn4">点我有惊喜</button>
<button class="btn btn-info" id="btn5">点我有惊喜</button>
<button class="btn btn-info" id="btn6">点我有惊喜</button>
<button class="btn btn-info" id="btn7">点我有惊喜</button>
<button class="btn btn-info" id="btn8">点我有惊喜</button>
<script>
$('#btn1').on('click', function () {
swal("直接弹出内容")
});
$('#btn2').on('click', function () {
swal("这是标题", "这是内容")
});
$('#btn3').on('click', function () {
swal("成功", "带有动画的", "success");
swal("异常", "带有动画的", "error");
swal("警告", "带有动画的", "warning")
});
$('#btn4').on('click', function () {
swal({
title: "这是标题",
text: "这是内容",
type: "warning", // success error warning info
showCancelButton: true, // 是否有取消按钮
confirmButtonClass: "btn-danger", // 删除按钮的样式类 bootstrap中的样式
confirmButtonText: "删除按钮上的文字",
closeOnConfirm: false // 是否瞬间关闭第二页面
},
function(){
swal("删除后的标题", "这里是内容", "success");
});
});
$('#btn5').on('click', function () {
swal({
title: "这是标题",
text: "这是内容",
type: "warning", // success error warning info
showCancelButton: true, // 是否有取消按钮
confirmButtonClass: "btn-info", // 删除按钮的样式类 bootstrap中的样式
confirmButtonText: "删除按钮上的文字",
cancelButtonText: "取消按钮上的文字",
closeOnConfirm: false, // 是否瞬间关闭第二页面
closeOnCancel: false // 是否瞬间关闭第二页面
},
function(isConfirm) {
if (isConfirm) {
swal("删除后的显示标题", "删除后的显示内容", "success");
} else {
swal("取消后的显示标题", "取消后的显示内容", "error");
}
});
});
$('#btn6').on('click', function () {
swal({
title: "这是一个可爱的标题",
text: "这是一个顽皮的内容",
imageUrl: 'thumbs-up.jpg' // 自定义图片
});
});
$('#btn7').on('click', function () {
swal({
title: "这是一个标题",
text: "这是一个提示内容",
type: "input",
showCancelButton: true, // 是否显示取消按钮
closeOnConfirm: false, // 是否瞬间关闭
inputPlaceholder: "这是一个提示框的提示内容"
}, function (inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("如果输入框是空的警告内容");
return false
}
swal("出入后的标题", "后面是你输入的内容 " + inputValue, "success");
});
});
$('#btn8').on('click', function () {
swal({
title: "这是一个标题",
text: "这是一个内容",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true // 是否显示等待提示
}, function () {
// 在这里写逻辑代码
setTimeout(function () {
swal("Ajax request finished!");
}, 2000);
});
});
</script>
</body>
</html>
类似于后台界面中的按钮就可以使用这个进行替换了 就像第一句一样 function中改成ajax 提交, 在success:function(){}的最后加上模板中的提示代码就可以了