Modal_popup 弹窗模块

项目简介

Modal_popup 是一个轻量级、高度可定制的弹窗模块，适用于现代 Web 应用。它提供丰富的弹窗类型（如确认框、提示框、通知等）、流畅的动画效果和完整的 API 支持，帮助开发者快速实现用户交互弹窗功能，提升用户体验。

安装指南

<link rel="stylesheet" href="https://popup.xypay.asia/modal-popup.min.css">
<script src="https://popup.xypay.asia/modal-popup.min.js"></script>

npm install modal-popup --save

import ModalPopup from 'modal-popup';
import 'modal-popup/modal-popup.css';

<link rel="stylesheet" href="项目目录/modal-popup.min.css">
<script src="项目目录/modal-popup.min.js"></script>

基本使用方法

1.1 获取弹窗实例

// 获取默认实例（推荐）
const modal = window.Modal.get();

// 或者创建新实例
const customModal = window.Modal.create('myModal');

1.2 基础弹窗调用

信息弹窗

modal.info('标题', '消息内容');
// 或带按钮
modal.info('标题', '消息内容', [
    { text: '确定', type: 'primary' },
    { text: '取消', type: 'secondary' }
]);

成功弹窗

modal.success('操作成功', '数据已保存');

警告弹窗

modal.warning('警告', '请注意以下事项');

错误弹窗

modal.error('操作失败', '请检查网络连接');

确认弹窗

modal.confirm('确认删除', '确定要删除吗？', 
    () => { console.log('确定'); },  // 确认回调
    () => { console.log('取消'); }   // 取消回调
);

高级弹窗调用

2.1 表单弹窗

const formHTML = `
    <div class="modal-form-group">
        <label>姓名</label>
        <input type="text" id="name">
    </div>
    <div class="modal-form-group">
        <label>邮箱</label>
        <input type="email" id="email">
    </div>
`;

modal.form('填写信息', formHTML,
    () => { // 提交回调
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        console.log('提交:', { name, email });
    },
    () => { // 取消回调
        console.log('取消填写');
    }
);

2.2 加载弹窗

// 显示加载弹窗
const loadingModal = modal.loading('加载中', '请稍候...');

// 3秒后关闭
setTimeout(() => {
    loadingModal.close();
}, 3000);

2.3 自定义弹窗

// 完全自定义弹窗
modal.custom({
    title: '自定义标题',
    content: '<div style="text-align:center; padding:20px;"><h3>自定义内容</h3><p>支持HTML</p></div>',
    icon: 'info', // 可选: success, warning, error, info
    buttons: [
        {
            text: '取消',
            type: 'secondary',
            onClick: () => console.log('取消')
        },
        {
            text: '确定',
            type: 'primary',
            onClick: () => console.log('确定')
        }
    ]
});

事件监听方法

3.1 监听弹窗事件

// 方法1：使用实例方法
modal.on('open', (detail) => {
    console.log('弹窗打开', detail);
});

modal.on('close', (detail) => {
    console.log('弹窗关闭', detail);
});

// 移除监听
const handler = (detail) => console.log('弹窗打开', detail);
modal.on('open', handler);
modal.off('open', handler);

实用示例代码

5.1 删除确认

function deleteItem(itemId) {
    modal.confirm(
        '确认删除',
        '确定要删除这项内容吗？删除后无法恢复。',
        () => {
            // 执行删除操作
            console.log('删除项目:', itemId);
            modal.success('删除成功', '项目已删除');
        },
        () => {
            console.log('取消删除');
        }
    );
}

5.2 表单验证

function submitForm() {
    // 显示加载
    const loading = modal.loading('提交中', '正在处理您的请求');
    
    // 模拟API调用
    setTimeout(() => {
        loading.close();
        
        // 随机成功或失败
        if (Math.random() > 0.5) {
            modal.success('提交成功', '您的数据已保存');
        } else {
            modal.error('提交失败', '请检查网络连接后重试');
        }
    }, 2000);
}

贡献指南

我们欢迎并感谢所有形式的贡献！

报告问题

1. 访问项目官网 popup.xypay.asia
2. 或发送邮件至 3138848070@qq.com
3. 请详细描述问题，包括：
   • 使用的版本号
   • 浏览器和环境信息
   • 复现步骤
   • 期望行为与实际行为

开发规范

• 遵循现有的代码风格
• 添加适当的注释
• 更新相关文档
• 确保所有测试通过

许可证信息

本项目采用 ISC许可证。

Copyright (c) 2026 xiaoyuyu

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.