PbootCMS程序默认提交表单弹窗样式美化教程

<script type="text/javascript">alert("这里是程序返回的内容");window.history.go(-1);</script>

// 选择表单元素，并给表单元素添加提交事件监听器
document.querySelector('.niceymform').addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止表单提交事件的默认行为
    var form = event.target; // 获取触发事件的表单元素
    var formData = new FormData(form); // 创建一个 FormData 对象，用于存储表单数据

    // 使用 fetch 函数发送请求
    fetch(form.action, {
        method: form.method, // 设置请求方法为表单的方法（GET 或 POST）
        body: formData // 设置请求体为表单数据
    })
        .then(function (response) {
            return response.text(); // 获取响应的原始文本数据
        })
        .then(function (data) {
            var regex = /alert\("([^"]+)"\)/; // 创建一个正则表达式，用于匹配 alert 弹窗的内容
            var matches = data.match(regex); // 使用正则表达式匹配响应数据中的 alert 弹窗内容
            if (matches && matches.length > 1) {
                var alertContent = matches[1]; // 获取匹配到的 alert 弹窗内容
                createPopup(alertContent); // 调用 createPopup 函数创建弹窗，并将提取的内容作为参数传递
            }
        })
        .catch(function (error) {
            console.error(error); // 捕获并打印错误信息
        });
});

    // 定义一个全局变量，用于存储定时器
    var popupTimer;

    // 创建弹出窗口函数，接受一个消息参数
    function createPopup(message) {
        // 创建一个遮罩层元素
        var overlay = document.createElement('div');
        overlay.className = 'overlay';
        // 添加点击事件监听器，点击遮罩层时关闭弹出窗口
        overlay.addEventListener('click', closePopup);
        // 将遮罩层添加到文档的body中
        document.body.appendChild(overlay);

        // 创建弹出窗口元素
        var popup = document.createElement('div');
        popup.className = 'popup';
        // 设置弹出窗口的文本内容为传入的消息
        popup.textContent = message;
        // 将弹出窗口添加到文档的body中
        document.body.appendChild(popup);

        // 调用居中弹出窗口函数
        centerPopup();
        // 设置一个定时器，3秒后自动关闭弹出窗口
        popupTimer = setTimeout(closePopup, 3000);
    }

    // 关闭弹出窗口函数
    function closePopup() {
        // 查找并移除弹出窗口元素
        var popup = document.querySelector('.popup');
        if (popup) {
            popup.parentNode.removeChild(popup);
        }

        // 查找并移除遮罩层元素
        var overlay = document.querySelector('.overlay');
        if (overlay) {
            overlay.parentNode.removeChild(overlay);
        }

        // 清除定时器
        clearTimeout(popupTimer);
    }

    // 居中弹出窗口函数
    function centerPopup() {
        // 查找弹出窗口元素
        var popup = document.querySelector('.popup');
        if (popup) {
            // 获取窗口的宽度和高度
            var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

            // 获取弹出窗口的宽度和高度
            var popupWidth = popup.offsetWidth;
            var popupHeight = popup.offsetHeight;

            // 计算弹出窗口的左边距和上边距，使其居中显示
            var left = (windowWidth - popupWidth) / 2;
            var top = (windowHeight - popupHeight) / 2;

            // 设置弹出窗口的左边距和上边距
            popup.style.left = left + 'px';
            popup.style.top = top + 'px';
        }
    }

    .popup {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 300px;
        min-height: 150px;
        transform: translate(-50%, -50%);
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 20px;
        text-align: center;
        font-size: 16px;
        color: black;
        border-radius: 10px;
        z-index: 9999;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        z-index: 9999;
    }