一款好看的密码弹窗

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

弹窗展示:

 

代码分享:

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

 

[hidecontent type="logged" desc="隐藏内容:登录后可查看"]

<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>
 

[/hidecontent]

 

 

[hidecontent type="logged" desc="隐藏内容:登录后可查看"]

<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: '<input type="password" id="swal-input1" class="swal2-input" placeholder="输入密码">',
        confirmButtonText: '确定',
        preConfirm: () => {
            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 => response.json())
          .then(data => {
                if (data.success) {
                    localStorage.setItem('passwordVerified', today);
                    Swal.fire('验证成功!', '', 'uccess');
                } else {
                    Swal.showValidationMessage('密码错误,请重试。');
                    return false; 
                }
            })
          .catch(error => {
                Swal.showValidationMessage(`请求失败: ${error}`);
                return false; 
            });
        },
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: () => {
            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: `
            获取更多信息和更新,请扫描二维码关注我们的公众号:<br>
            <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"><br>
            <button id="copyButton" class="swal2-styled">复制微信</button>
            <button id="returnButton" class="swal2-styled">返回</button>
        `,
        showConfirmButton: false,
        focusConfirm: false,
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: () => {
            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>这个放到头部引用就可以

[/hidecontent]

[hidecontent type="logged" desc="隐藏内容:登录后可查看"]

<?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文件,代码全部复制进去。放在服务器然后用上面的js对接即可

[/hidecontent]