joyconn-dialog

JoyDialog

能够自适应pc、移动端的弹窗插件，包括常见的 alert、toast、notice 类型弹窗。

特性

• 支持常见的 alert、toast、notice 类型弹窗
• 兼容IE9+、chrome、firefox、safari
• 可自定义按钮的文字、样式、回调函数，支持多个按钮
• 多个弹窗状态改变回调函数
• 可扩展性强
• 可自定义多个按钮

github

https://github.com/cn-joyconn/joyconn-dialog

gitee

https://gitee.com/EricZsp/joyconn-dialog

演示地址

https://cn-joyconn.github.io/joyconn-dialog/demo/demo.html

效果预览

使用说明

1、script引入方式

//请自行引入zepto或jquery
<link rel="stylesheet" href="dist/JoyDialog.css" />
<script src="dist/JoyDialog.js"></script>

2、npm引入方式

npm install --save-dev joyconn-dialog
import {JoyDialog} from "joyconn-dialog"

3、HTML 结构

<button id="btn-01">显示弹窗</button>

4、实例化

$(document).on('click', '#btn-01', function() {
    var dialog1 = JoyDialog({
         content: 'Dialog 移动端弹窗插件的自定义提示内容'
    });
});

参数

参数	默认值	说明
type	'alert'	弹窗的类型。 alert: 确定; toast: 状态提示 基于toast，内置了loading、toast_success、toast_error、toast_warning、toast_info、toast_question、toast_busy、toast_wind 8种模式; 基于notice，内置了notice_success、notice_error、notice_warning、notice_info 4种模式; notice: 提示信息
style	'default'	alert 弹窗的风格。 default: 根据访问设备平台; pc: pc 风格;mobile: mobile 风格;
titleShow	true	是否显示标题
titleText	'提示'	标题文字
bodyNoScroll	false	body 内容不可以滚动
closeBtnShow	false	是否显示关闭按钮
content	''	弹窗提示内容, 值可以是 HTML 内容
contentScroll	true	alert 弹窗提示内容是否限制最大高度, 使其可以滚动
dialogClass	''	弹窗自定义 class
autoClose	0	弹窗自动关闭的延迟时间(毫秒)。 0: 不自动关闭; 大于0: 自动关闭弹窗的延迟时间 toast、notice默认2000毫秒
overlayShow	true	是否显示遮罩层
width	auto	宽度 自动auto、100px
height	auto	高度 自动auto、100px
overlayClose	false	是否可以点击遮罩层关闭弹窗
buttonStyle	'side'	按钮排版样式。side: 并排; stacked: 堆叠
buttonTextConfirm	'确定'	确定按钮文字，为null、''、undefined、false时不显示确定按钮
buttonTextCancel	'取消'	取消按钮文字，为null、''、undefined、false时不显示取消按钮
buttonClassConfirm	''	确定按钮自定义 class
buttonClassCancel	''	取消按钮自定义 class
buttons	[]	alert 弹窗自定义按钮组, 不会覆盖"确定"与"取消"按钮; 单个 button 对象可设置 name [ 名称 ]、class [ 自定义class ]、callback [ 点击执行的函数 ]
infoIcon	''	toast 与 notice 弹窗的提示图标, 值为图标的路径。不设置=不显示
infoIconColor	''	toast 与 notice 弹窗的提示图标的颜色, 如：'#f00'。
infoText	''	toast 与 notice 弹窗的提示文字, 会覆盖 content 的设置
infoColor	'#fff'	toast 与 notice 弹窗的文字颜色
infoBgColor	'rgba(0, 0, 0, 0.8)'	toast 与 notice 弹窗的背景颜色
position	'top'	notice 弹窗的位置, center: 居中; bottom: 底部; top: 底部

回调函数

函数	默认值	说明
onClickConfirmBtn	function(){}	点击“确定”按钮的回调函数
onClickCancelBtn	function(){}	点击“取消”按钮的回调函数
onBeforeShow	function(){}	弹窗显示前的回调函数
onShow	function(){}	弹窗显示后的回调函数
onBeforeClosed	function(){}	弹窗关闭前的回调函数
onClosed	function(){}	弹窗关闭后的回调函数

方法

实例方法	说明
obj.close	关闭对话框。 用法：dialogObj.close()
obj.resizeDialog	改变弹窗大小,参数：(高,宽) 用法：dialogObj.resizeDialog(100,100)
obj.update	更改弹窗内容 ( 图标以及提示文字 ) 可传入参数： content: 弹窗内容, 可以是HTML infoIcon: 弹窗提示图标 infoText: 弹窗提示文字 autoClose: 自动关闭的延迟时间 onBeforeClosed: 关闭前回调函数 onClosed: 关闭后回调函数

静态方法	说明
JoyDialog.showLoading();	弹出全局唯一loading,多次调用不重叠
JoyDialog.hideLoading();	关闭全局loading

目录结构

.
├─demo                      # demo示例页面
│  ├─image                  # demo中的图片
│  ├─lib                    # demo中用到的js插件
│  ├─demo.html              # demo样例html文件
│  └─style.css              #  demo中用到的css样式
├─dist                      # 项目发布资源目录, npm 生成
│  ├─iconfont               # 弹出层的iconfont库
│  ├─JoyDialog.css          # 弹出层 CSS 文件
│  └─JoyDialog.js           # dialo.js文件
├─src                       # 实际进行开发的目录
│  ├─css                    # 项目 CSS 文件 
│  ├─iconfont               # 项目 iconfont 文件
│  └─js                     # 项目 JS 文件
│    ├─core.js              # 弹窗主要 JS
│    ├─dialog.js            # dialog封装 JS
│    └─util.js              # 工具 JS
│
├─index.js                  # 入口 JS
├─webpack.config.js         # webpack 打包配置
└─package.json              # 项目信息以及依赖

npm 使用方法

1、安装 npm modules

npm install

2、在本地运行项目

npm run serve

3、打包命令

 npm run build  

参考资料

https://github.com/sufangyu/dialog2