一、SweetAlert
1、介绍
- SweetAlert 是一个基于 JavaScript 的弹窗插件，用于创建美观而且高度可定制的弹窗效果。
- SweetAlert 提供了多种弹窗风格和动画效果，可以用于警告、确认、提示和错误等不同的场景。
2、特点
（1）漂亮的外观
SweetAlert创建的弹窗外观美观、现代，比浏览器原生弹窗更具吸引力。
（2）易于使用
使用SweetAlert非常简单，只需几行代码即可创建弹窗，而且提供了丰富的选项供定制。
（3）定制性强
SweetAlert支持自定义弹窗的标题、文本、按钮文本、图标等各个方面，可以根据需求定制弹窗样式。
（4）丰富的交互选项
除了简单的警告和确认弹窗外，SweetAlert还支持输入框、下拉框等更复杂的交互组件。
（5）动画效果
SweetAlert提供了丰富的动画效果，可以为弹窗添加动画使用户体验更加生动。
（6）响应式设计
SweetAlert弹窗具有响应式设计，可以自动适应不同屏幕尺寸，确保在各种设备上显示良好。
3、使用
（1）引入SweetAlert库
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
（2）官网链接
- SweetAlert1官网：SweetAlert
- SweetAlert2官网：SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
（3）ajax结合sweetalert实现删除按钮的二次确认
$("#b55").click(function () {
swal({
title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true, // 是否显示取消按钮
confirmButtonClass: "btn-danger", // 确认按钮的样式类
confirmButtonText: "删除", // 确认按钮文本
cancelButtonText: "取消", // 取消按钮文本
closeOnConfirm: false, // 点击确认按钮不关闭弹框
showLoaderOnConfirm: true // 显示正在删除的动画效果
},
function () {
var deleteId = 2;
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.code === 0) {
swal("删除成功!", "你可以准备跑路了！", "success");
} else {
swal("删除失败", "你可以再尝试一下！", "error")
}
}
})
});
})
- 上面这个二次确认的动态框样式，你也可以直接应用到你的项目中
- sweetalert针对中文可能会出现展示不全的现象，自己找到对应的标签书写css修改样式即可
（4）提醒事项
- 1.上述的样式类部分渲染的样式来自于bootstrap中，所有建议在使用上述样式时，将bootstrap的js和css也导入了，这样的情况下，页面效果就不会有任何问题
- 2.弹出的上述模态框中，可能字体会被图标掩盖一部分，可通过调整字体的上外边距来解决
二、layer
1、介绍
- layer 是一款近年来备受青睐的 web 弹层组件，可轻松实现 Alert / Confirm / Prompt / 普通提示 / 页面区块 / iframe / tips 等等几乎所有的弹出交互。
- layer 使用更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性。
2、官网
3、安装配置
- （1）layer 库下载并解压后，将整个 layer 文件夹放到项目中来，这里面除了 js 库外还自带了一套默认皮肤。
- （2）接着在需要使用 layer 的页面中将 layer.js 引入即可。同时由于其依赖 jQuery，我们还需要引入 jQuery。