(源码)基于前端技术的自适应弹窗插件 JoyDialog.zip

# 基于前端技术的自适应弹窗插件 JoyDialog ## 项目简介 JoyDialog 是一款强大的弹窗插件，可自适应 PC 和移动端。它提供了常见的 alert、toast、notice 类型弹窗，具备高度的自定义性，并且兼容多种主流浏览器，能满足不同场景下的弹窗需求。 ## 项目的主要特性和功能 ### 特性 - 支持 alert、toast、notice 三种常见类型弹窗。 - 兼容 IE9+、Chrome、Firefox、Safari 等浏览器。 - 可自定义按钮的文字、样式和回调函数，支持多个按钮设置。 - 提供多个弹窗状态改变的回调函数。 - 具有较强的可扩展性。 ### 功能 - 多种弹窗样式和主题，适应不同需求。 - 全局唯一的 loading 弹窗，避免多次调用重叠。 - 丰富的 API 接口，便于开发者控制弹窗。 - 支持自定义 CSS 样式和 JS 行为，实现个性化定制。 ## 安装使用步骤 假设用户已下载本项目的源码文件： 1. **安装依赖**：在项目根目录下，执行 `npm install` 安装所需依赖。 2. **引入样式**：在 HTML 文件中引入 `dist/JoyDialog.css` 文件。 ```html <link rel="stylesheet" href="dist/JoyDialog.css" /> ``` 3. **引入脚本**：可选择 script 引入或 npm 模块化引入。 - script 引入： ```html <script src="dist/JoyDialog.js"></script> ``` - npm 引入： ```javascript npm install --save-dev joyconn-dialog import {JoyDialog} from "joyconn-dialog" ``` 4. **创建实例**：参考以下示例代码创建 JoyDialog 实例。 ```javascript $(document).on('click', '#btn-01', function() { var dialog1 = JoyDialog({ content: 'Dialog 移动端弹窗插件的自定义提示内容' }); }); ``` 5. **调用方法**：通过创建的实例调用相关方法，如关闭对话框、改变弹窗大小、更新弹窗内容等。 ```javascript // 关闭对话框 dialog1.close(); // 改变弹窗大小 dialog1.resizeDialog(100, 100); // 更新弹窗内容 dialog1.update({ content: '新的弹窗内容', infoIcon: 'path/to/icon.png', infoText: '新的提示文字' }); ```