%20(2).svg)
项目简介
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
- 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: '新的提示文字'
});
```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】