一款好看的密码弹窗

由于平时比较喜欢跟群友们玩Alist，群友们都希望给网盘加一个密码弹窗，由于之前分享的密码弹窗只是前端展示的，密码容易暴露。 故此现在重新写一个对接后端的，代码没有什么难度比较简单。会玩了的拿去改改还是不错的，也可以套用其他网站。

弹窗展示：

代码分享：

如果发现有BUG可以反馈，有大佬添加其他功能好用的也可以分享并更新

<style>
 /*
这是样式，样式尽量放头部【规范】
*/
    .swal2-styled {
        border: 0;
        border-radius: 0.8em; 
        padding: 10px 20px;
        font-size: 16px; 
        line-height: 1.6;
    }
    .button-confirm {
        background-color: green; 
    }
    .button-visit {
        background-color: red; 
    }
    .button-qr {
        background-color: blue;
    }
    </style>

<script>
 /*
分享来源：橘子博客
制作不易   免费分享
*/
let today;
window.onload = function() {
    today = new Date().toISOString().slice(0, 10);
    if (localStorage.getItem('passwordVerified') === today) {
        return;
    }
    showPasswordPrompt();
};
function showPasswordPrompt() {
    Swal.fire({
        icon: 'info',
        title: '不良人  天暗星',
        html: '&lt;input type="password" id="swal-input1" class="swal2-input" placeholder="输入密码"&gt;',
        confirmButtonText: '确定',
        preConfirm: () =&gt; {
            const password = document.getElementById('swal-input1').value;
            if (!password) {
                Swal.showValidationMessage('密码不能为空');
                return false; 
            }
            return fetch('你的接口地址', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({password: password})
            })
          .then(response =&gt; response.json())
          .then(data =&gt; {
                if (data.success) {
                    localStorage.setItem('passwordVerified', today);
                    Swal.fire('验证成功!', '', 'uccess');
                } else {
                    Swal.showValidationMessage('密码错误，请重试。');
                    return false; 
                }
            })
          .catch(error =&gt; {
                Swal.showValidationMessage(`请求失败: ${error}`);
                return false; 
            });
        },
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: () =&gt; {
            const input = document.getElementById('swal-input1');
            input.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    Swal.clickConfirm(); 
                }
            });
            const actions = Swal.getActions();
            const confirmButton = Swal.getConfirmButton();
            confirmButton.classList.add('swal2-styled');
            confirmButton.style.backgroundColor = 'green'; 
            const visitButton = document.createElement('button');
            visitButton.textContent = '小橘子';
            visitButton.classList.add('swal2-styled');
            visitButton.style.backgroundColor ='red'; 
            visitButton.onclick = function() { window.open('https://xjuzi.cn', '_blank'); };
            actions.appendChild(visitButton);
            const qrButton = document.createElement('button');
            qrButton.textContent = '获取密码';
            qrButton.classList.add('swal2-styled');
            qrButton.style.backgroundColor = 'blue'; 
            qrButton.onclick = showQRCode;
            actions.appendChild(qrButton);
        }
    });
};
function showQRCode() {
    Swal.fire({
        title: '关注我们的公众号',
        html: `
            获取更多信息和更新，请扫描二维码关注我们的公众号：&lt;br&gt;
            &lt;img src="https://pan.xjuzi.cn/d/%E4%BD%9C_______________%E6%89%A7/%E2%9C%A8logo/WX01.png?sign=212pDFVk_Qkq6FO83PffJY8MlHO57sGzFwgGdS3DE6Q=:0" alt="QR Code"&gt;&lt;br&gt;
            &lt;button id="copyButton" class="swal2-styled"&gt;复制微信&lt;/button&gt;
            &lt;button id="returnButton" class="swal2-styled"&gt;返回&lt;/button&gt;
        `,
        showConfirmButton: false,
        focusConfirm: false,
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: () =&gt; {
            document.getElementById("copyButton").addEventListener("click", function(event) {
                event.preventDefault();  
                const tempElement = document.createElement("textarea");
                tempElement.value = 'CydiaBi';
                document.body.appendChild(tempElement);
                tempElement.select();
                document.execCommand("copy");
                document.body.removeChild(tempElement);
                Swal.showValidationMessage('复制成功！');
            });
            document.getElementById("returnButton").addEventListener("click", function(event) {
                event.preventDefault();  
                showPasswordPrompt();  
            });
        }
    });
}
</script>

调用方法

1：复制全部代码放在自定义内容

2：新建空白js文件放在服务器调用，<script src="https://域名/666.js"></script>

3：依赖<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>这个放到头部引用就可以

<php>
/*
分享来源：橘子博客
制作不易   免费分享
/
header('Access-Control-Allow-Origin: ');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, X-Requested-With');
header('Content-Type: application/json');
$validPassword = '888';
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
echo "这是一个密码验证接口，请通过POST请求提交密码进行验证。";
exit;
}
$postData = json_decode(file_get_contents('php://input'), true);
$password = $postData['password'] ?? '';

if ($password === $validPassword) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}

</php>

使用方法：新建php文件，代码全部复制进去。放在服务器然后用上面的js对接即可