美化网站：探索炫酷的SweetAlert弹窗样式
前言
SweetAlert是一个流行的JavaScript弹窗库，用于创建各种吸引人的对话框和提示框。它可以轻松地替代浏览器默认的alert和confirm弹窗，提供了更多的自定义选项和令人愉悦的用户体验。
官方地址：https://sweetalert.js.org
正文
引入 SweetAlert 的 CSS/JS 文件
<!-- 引入 SweetAlert 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
<!-- 引入 SweetAlert 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>一、密码弹窗+二维码
效果演示
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码弹窗+二维码</title>
<!-- 引入 SweetAlert 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
<!-- 引入 SweetAlert 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>
</head>
<body>
</body>
<script>
let password = "1";//密码自定义
if (localStorage.getItem('pan_password') == password) {
} else {
checkPassword("success", "输入密码进入")
}
function checkPassword(ic, ti) {
Swal.fire({
title: '温馨提示',
icon: 'info',
html:
'<p>正文内容</p><p>优享云：www.ahfi.cn</p>',
input: 'password',
position: 'center', // 设置弹窗居中显示
closeOnConfirm: false,
showDenyButton: true,
denyButtonText: `查看二维码`,
allowOutsideClick: false,
confirmButtonText: '确定访问',
inputPlaceholder: '输入密码后，点确定访问',
inputAttributes: {
maxlength: 10,
autocapitalize: 'off',
autocorrect: 'off'
},
inputValidator: (value) => {
if (value == '') {
return '密码不能为空！'
} else if (value == password) {
Swal.fire({
icon: 'success',
title: '欢迎访问优享云',
showConfirmButton: false,
timer: 2000
});
localStorage.setItem("pan_password", value);
} else {
return '密码错误！请重新输入！';
}
}
}).then((result) => {
if (result.isDenied) {
Swal.fire({
showConfirmButton: false,
allowOutsideClick: false,
icon: 'info',
html:
'<p>请扫描上方二维码访问网站</p>',
imageUrl: 'https://image-cdn.cfb.asia/2023/0925/c1933c169c9e13514643a842195ab675.png',
imageWidth: 200,
imageHeight: 200,
imageAlt: 'Custom image',
})
}
})
}
</script>
</html>更多持续更新...
THE END
