alert、prompt、confirm 响应式插件

最新推荐文章于 2025-05-21 11:59:16 发布

铁头大蚂蚁

最新推荐文章于 2025-05-21 11:59:16 发布

阅读量164

点赞数 1

文章标签： prompt

本文链接：https://blog.youkuaiyun.com/u011739075/article/details/146179964

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sirius 弹窗插件</title>
    <link rel="stylesheet" href="css/sirius-dialog.css">
</head>
<body>
    <div class="sirius-container">
        <h1>Sirius 弹窗插件示例</h1>
        <div class="sirius-buttons">
            <button id="sirius-showAlert">显示 Alert</button>
            <button id="sirius-showConfirm">显示 Confirm</button>
            <button id="sirius-showPrompt">显示 Prompt</button>
        </div>
    </div>

    <script src="js/sirius-dialog.js"></script>
    <script src="js/sirius-main.js"></script>
    
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
}

.sirius-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    text-align: center;
}

.sirius-container h1 {
    margin-bottom: 30px;
    color: #2c3e50;
}

.sirius-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.sirius-buttons button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.sirius-buttons button:hover {
    background-color: #2980b9;
}

/* 弹窗样式 */
.sirius-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sirius-dialog-container {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 450px;
    padding: 25px;
    position: relative;
    transition: transform 0.3s ease;
    transform: translateY(20px);
}

.sirius-dialog-header {
    margin-bottom: 15px;
}

.sirius-dialog-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
}

.sirius-dialog-content {
    margin-bottom: 20px;
}

.sirius-dialog-message {
    font-size: 16px;
    line-height: 1.5;
    color: #34495e;
}

.sirius-dialog-input {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border: 1px solid #ddd;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.9);
}

.sirius-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.sirius-dialog-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s;
}

.sirius-dialog-button-cancel {
    background-color: #e74c3c;
    color: white;
}

.sirius-dialog-button-cancel:hover {
    background-color: #c0392b;
}

.sirius-dialog-button-confirm {
    background-color: #2ecc71;
    color: white;
}

.sirius-dialog-button-confirm:hover {
    background-color: #27ae60;
}

.sirius-dialog-visible {
    opacity: 1;
}

.sirius-dialog-visible .sirius-dialog-container {
    transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .sirius-dialog-container {
        width: 95%;
        padding: 20px;
    }
    
    .sirius-dialog-title {
        font-size: 20px;
    }
    
    .sirius-dialog-footer {
        flex-direction: column;
    }
    
    .sirius-dialog-button {
        width: 100%;
        margin-bottom: 8px;
    }
}

/**
 * Sirius 自定义弹窗插件
 * 支持 alert、confirm、prompt 三种类型
 * 兼容 PC 和移动端
 */
class SiriusDialog {
    constructor(options = {}) {
        // 默认配置
        this.siriusDefaults = {
            title: '提示',
            message: '',
            type: 'alert', // alert, confirm, prompt
            confirmText: '确定',
            cancelText: '取消',
            defaultValue: '',
            confirmCallback: null,
            cancelCallback: null,
            backdropClose: true,
            zIndex: 1000,
            theme: {
                overlayColor: 'rgba(0, 0, 0, 0.5)',
                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                titleColor: '#2c3e50',
                messageColor: '#34495e',
                confirmButtonColor: '#2ecc71',
                confirmButtonTextColor: 'white',
                cancelButtonColor: '#e74c3c',
                cancelButtonTextColor: 'white',
                blurAmount: '10px'
            }
        };

        // 合并配置
        this.siriusOptions = this._siriusMergeOptions(this.siriusDefaults, options);
        
        // 创建弹窗元素
        this._siriusCreateDialog();
    }

    // 合并配置
    _siriusMergeOptions(defaults, options) {
        const siriusResult = Object.assign({}, defaults);
        
        for (const key in options) {
            if (key === 'theme' && options.theme) {
                siriusResult.theme = Object.assign({}, defaults.theme, options.theme);
            } else {
                siriusResult[key] = options[key];
            }
        }
        
        return siriusResult;
    }

    // 创建弹窗元素
    _siriusCreateDialog() {
        // 创建遮罩层
        this.siriusOverlay = document.createElement('div');
        this.siriusOverlay.className = 'sirius-dialog-overlay';
        this.siriusOverlay.style.zIndex = this.siriusOptions.zIndex;
        this.siriusOverlay.style.backgroundColor = this.siriusOptions.theme.overlayColor;

        // 创建弹窗容器
        this.siriusContainer = document.createElement('div');
        this.siriusContainer.className = 'sirius-dialog-container';
        this.siriusContainer.style.backgroundColor = this.siriusOptions.theme.backgroundColor;
        this.siriusContainer.style.backdropFilter = `blur(${this.siriusOptions.theme.blurAmount})`;
        this.siriusContainer.style.webkitBackdropFilter = `blur(${this.siriusOptions.theme.blurAmount})`;

        // 创建弹窗头部
        const siriusHeader = document.createElement('div');
        siriusHeader.className = 'sirius-dialog-header';

        const siriusTitle = document.createElement('h2');
        siriusTitle.className = 'sirius-dialog-title';
        siriusTitle.textContent = this.siriusOptions.title;
        siriusTitle.style.color = this.siriusOptions.theme.titleColor;
        siriusHeader.appendChild(siriusTitle);

        // 创建弹窗内容
        const siriusContent = document.createElement('div');
        siriusContent.className = 'sirius-dialog-content';

        const siriusMessage = document.createElement('p');
        siriusMessage.className = 'sirius-dialog-message';
        siriusMessage.textContent = this.siriusOptions.message;
        siriusMessage.style.color = this.siriusOptions.theme.messageColor;
        siriusContent.appendChild(siriusMessage);

        // 如果是 prompt 类型，添加输入框
        if (this.siriusOptions.type === 'prompt') {
            this.siriusInput = document.createElement('input');
            this.siriusInput.className = 'sirius-dialog-input';
            this.siriusInput.value = this.siriusOptions.defaultValue;
            siriusContent.appendChild(this.siriusInput);
        }

        // 创建弹窗底部
        const siriusFooter = document.createElement('div');
        siriusFooter.className = 'sirius-dialog-footer';

        // 如果是 confirm 或 prompt 类型，添加取消按钮
        if (this.siriusOptions.type === 'confirm' || this.siriusOptions.type === 'prompt') {
            const siriusCancelButton = document.createElement('button');
            siriusCancelButton.className = 'sirius-dialog-button sirius-dialog-button-cancel';
            siriusCancelButton.textContent = this.siriusOptions.cancelText;
            siriusCancelButton.style.backgroundColor = this.siriusOptions.theme.cancelButtonColor;
            siriusCancelButton.style.color = this.siriusOptions.theme.cancelButtonTextColor;
            siriusCancelButton.addEventListener('click', () => this._siriusHandleCancel());
            siriusFooter.appendChild(siriusCancelButton);
        }

        // 添加确认按钮
        const siriusConfirmButton = document.createElement('button');
        siriusConfirmButton.className = 'sirius-dialog-button sirius-dialog-button-confirm';
        siriusConfirmButton.textContent = this.siriusOptions.confirmText;
        siriusConfirmButton.style.backgroundColor = this.siriusOptions.theme.confirmButtonColor;
        siriusConfirmButton.style.color = this.siriusOptions.theme.confirmButtonTextColor;
        siriusConfirmButton.addEventListener('click', () => this._siriusHandleConfirm());
        siriusFooter.appendChild(siriusConfirmButton);

        // 组装弹窗
        this.siriusContainer.appendChild(siriusHeader);
        this.siriusContainer.appendChild(siriusContent);
        this.siriusContainer.appendChild(siriusFooter);
        this.siriusOverlay.appendChild(this.siriusContainer);

        // 点击遮罩层关闭弹窗
        if (this.siriusOptions.backdropClose) {
            this.siriusOverlay.addEventListener('click', (e) => {
                if (e.target === this.siriusOverlay) {
                    this._siriusHandleCancel();
                }
            });
        }

        // 添加键盘事件
        this._siriusAddKeyboardEvents();
    }

    // 添加键盘事件
    _siriusAddKeyboardEvents() {
        this._siriusKeydownHandler = (e) => {
            if (e.key === 'Escape') {
                this._siriusHandleCancel();
            } else if (e.key === 'Enter') {
                this._siriusHandleConfirm();
            }
        };
        document.addEventListener('keydown', this._siriusKeydownHandler);
    }

    // 移除键盘事件
    _siriusRemoveKeyboardEvents() {
        document.removeEventListener('keydown', this._siriusKeydownHandler);
    }

    // 显示弹窗
    siriusShow() {
        document.body.appendChild(this.siriusOverlay);
        
        // 强制重绘
        this.siriusOverlay.offsetHeight;
        
        // 添加显示类
        this.siriusOverlay.classList.add('sirius-dialog-visible');
        
        // 如果是 prompt 类型，聚焦输入框
        if (this.siriusOptions.type === 'prompt' && this.siriusInput) {
            setTimeout(() => {
                this.siriusInput.focus();
            }, 100);
        }
        
        return this;
    }

    // 关闭弹窗
    siriusClose() {
        this.siriusOverlay.classList.remove('sirius-dialog-visible');
        
        setTimeout(() => {
            if (this.siriusOverlay.parentNode) {
                document.body.removeChild(this.siriusOverlay);
            }
            this._siriusRemoveKeyboardEvents();
        }, 300);
    }

    // 处理确认
    _siriusHandleConfirm() {
        if (typeof this.siriusOptions.confirmCallback === 'function') {
            if (this.siriusOptions.type === 'prompt') {
                this.siriusOptions.confirmCallback(this.siriusInput.value);
            } else {
                this.siriusOptions.confirmCallback();
            }
        }
        this.siriusClose();
    }

    // 处理取消
    _siriusHandleCancel() {
        if (typeof this.siriusOptions.cancelCallback === 'function') {
            this.siriusOptions.cancelCallback();
        }
        this.siriusClose();
    }

    // 静态方法：显示 alert 弹窗
    static siriusAlert(message, options = {}) {
        const siriusAlertOptions = Object.assign({}, options, {
            message,
            type: 'alert'
        });
        
        return new SiriusDialog(siriusAlertOptions).siriusShow();
    }

    // 静态方法：显示 confirm 弹窗
    static siriusConfirm(message, confirmCallback, cancelCallback, options = {}) {
        const siriusConfirmOptions = Object.assign({}, options, {
            message,
            type: 'confirm',
            confirmCallback,
            cancelCallback
        });
        
        return new SiriusDialog(siriusConfirmOptions).siriusShow();
    }

    // 静态方法：显示 prompt 弹窗
    static siriusPrompt(message, defaultValue = '', confirmCallback, cancelCallback, options = {}) {
        const siriusPromptOptions = Object.assign({}, options, {
            message,
            type: 'prompt',
            defaultValue,
            confirmCallback,
            cancelCallback
        });
        
        return new SiriusDialog(siriusPromptOptions).siriusShow();
    }
}

// 全局暴露
window.SiriusDialog = SiriusDialog;

document.addEventListener('DOMContentLoaded', function() {
    // Alert 示例
    document.getElementById('sirius-showAlert').addEventListener('click', function() {
        SiriusDialog.siriusAlert('这是一个自定义的 Alert 弹窗！', {
            title: '提示信息',
            confirmText: '我知道了'
        });
    });

    // Confirm 示例
    document.getElementById('sirius-showConfirm').addEventListener('click', function() {
        SiriusDialog.siriusConfirm(
            '您确定要执行此操作吗？',
            function() {
                console.log('用户点击了确定');
                SiriusDialog.siriusAlert('您点击了确定按钮');
            },
            function() {
                console.log('用户点击了取消');
            },
            {
                title: '确认操作',
                confirmText: '确定',
                cancelText: '取消',
                theme: {
                    confirmButtonColor: '#3498db'
                }
            }
        );
    });

    // Prompt 示例
    document.getElementById('sirius-showPrompt').addEventListener('click', function() {
        SiriusDialog.siriusPrompt(
            '请输入您的姓名：',
            '',
            function(value) {
                console.log('用户输入：', value);
                if (value) {
                    SiriusDialog.siriusAlert(`您好，${value}！`);
                } else {
                    SiriusDialog.siriusAlert('您没有输入任何内容');
                }
            },
            function() {
                console.log('用户取消了输入');
            },
            {
                title: '输入信息',
                confirmText: '提交',
                cancelText: '取消'
            }
        );
    });
});

alert、prompt、confirm 响应式插件基于原生html js css实现