Modal Pro - 现代化弹窗解决方案

核心特性

精心设计的功能集合，满足各种弹窗需求，从简单的提示到复杂的交互

轻量高效

仅几KB 压缩后大小，零依赖，加载迅速，不拖慢页面性能。采用原生 JavaScript 实现，兼容所有现代浏览器。

主题定制

内置亮色/暗色主题支持，可通过 CSS 变量轻松自定义颜色、间距和动画效果。完美适配您的设计系统。

响应式设计

完美适配各种屏幕尺寸，从桌面到移动设备都提供优秀的用户体验。自动调整布局和触摸交互。

完整 API

提供丰富的 API 方法，支持链式调用和事件监听。可以轻松集成到任何前端框架或原生项目中。

无障碍访问

遵循 WAI-ARIA 标准，支持键盘导航和屏幕阅读器。确保所有用户都能无障碍使用弹窗功能。

动态内容

支持动态加载内容、进度条、倒计时等交互效果。可以实时更新弹窗内容而无需重新创建。

实时演示

点击下方按钮体验各种弹窗类型，所有弹窗都可自定义内容和样式

信息弹窗

显示通知、提示或一般信息

成功弹窗

操作成功后的反馈提示

警告弹窗

需要用户注意的警告信息

错误弹窗

操作失败或错误提示

确认弹窗

需要用户确认的操作

表单弹窗

收集用户输入的表单

快速安装

只需几行代码即可将 Modal Pro 集成到您的项目中

通过 npm 安装

# 使用 npm 安装
npm install modal-popup

# 使用 yarn 安装
yarn add modal-popup

通过 CDN 使用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://popup.xypay.asia/modal-popup.min.css">

<!-- 引入脚本 -->
<script src="https://popup.xypay.asia/modal-popup.min.js"></script>

基本使用示例

// 获取默认弹窗实例
const modal = window.Modal.get();

// 显示信息弹窗
modal.info('系统通知', '您的操作已成功完成！');

// 显示确认弹窗
modal.confirm(
  '确认删除',
  '确定要删除此项吗？此操作不可撤销。',
  () => { console.log('用户点击了确定'); },
  () => { console.log('用户点击了取消'); }
);

现代化弹窗解决方案