boxDialog 是一款轻量级的弹窗通用组件,包括弹出字符串内容、自定义 DOM 结构、iframe 页面等以及快捷操作等功能,具有高度的可定制性。

boxDialog ( v1.0 )

@author: 虾兵
如何使用:页面中须包含以下文件

			<link rel="stylesheet" href="boxDialog/dist/skins/default.css"">
			<script src="boxDialog/dist/boxDialog.min.js"></script>

			注意:请根据项目实际路径引用,css样式表放在 <head> 之间。
		

1. 初体验(信息提示):

(成功)success  示例代码

                

            

2. 弹出自定义 DOM 结构:

弹出自定义 DOM 结构  示例代码

                

            
这是一段 id 为 demo_dom_content 的 DOM 结构。


说明:弹出自定义 DOM 结构,先把要弹出的 DOM 结构隐藏,之后获取该段 DOM 的 Id 传给 boxDialog 的参数 content 参数。

注意:size参数为弹窗的宽高,如:size:['400px','300px'],只设置一个为宽度。支持 px 和 % 两种单位。

3. 弹出 iframe 页面

弹出 iframe 页面  示例代码

                

            

4. 可用的boxDialog参数:

默认参数
title: '\u6d88\u606f', 标题,默认为:消息
content: 'Hello, world!', 弹窗内容
ok: true, 是否显示确定按钮,默认显示
cancel: true, 是否显示取消按钮,默认显示
okText: '\u786e\u5b9a', 确定按钮文本, 默认为:确定
cancelText: '\u53d6\u6d88', 取消按钮文本, 默认为:取消
size: ['auto','auto'], 内容宽,高, 默认auto
padding: '20px', 内容与边界填充 padding,格式 css 语法
icon: null, 图标名称,字符串,如: icon:'success'
time: null, 自动关闭时间,单位秒
shade: { background: '#000', opacity: 0.8, duration: 200 }, 遮罩层默认显示,设置 shade:false, 不显示遮罩;背景色,默认黑色;透明度, 默认0.8; 动画速度, 单位毫秒, 默认200
fixed: true, 是否固定位置,默认true固定位置
zIndex: 2010, 弹窗的堆叠顺序,默认2010
drag: false, 拖拽开关, 默认关闭
esc: true, 是否支持 Esc 键关闭
position: null, X,Y轴坐标, 不设置默认居中,设置如:{left:'100px',top:'100px'}
closeBtn: true, 弹窗的关闭按钮是否显示,默认显示
varBtns: null, 自定义按钮, 格式如: [ { text:'按钮3',className:null,callback:null },{ text:'按钮4',className:null,callback:null } ],callback 为点击按钮的回调函数
className: null, 自定义弹窗最外层class
initCallback: null, { function }  初始化成功执行的回调函数
okCallback: null, { function }  点击确定按钮执行的回调函数
cancelCallback: null, { function }  点击取消按钮执行的回调函数
closeCallback: null { function }  弹窗关闭执行的回调函数

注意:以上是可设置的参数,可根据自己需求灵活运用。

回调函数使用:

okCallback, cancelCallback, initCallback, closeCallback 用于不同场景下的回调函数, 参数分别为点击确定按钮、点击取消按钮、弹窗初始化成功后和关闭弹窗(如:2秒后自动关闭)执行的回调函数,可以在回调函数中执行ajax等操作DOM,
回调函数中可用 this 关键字,指向弹窗实体,可调用内部方法。

回调函数接受一个参数返回弹窗索引,如:


			okCallback: function(index){
				// index 就是该弹窗索引, 通过 $('#box-dialog'+index) 可获取该弹窗最外层 DOM
			}
		

5. 外部可用方法:

对外暴露
open: dialog 主方法,即弹出窗口实体,使用方法:boxDialog.open(), 传入参数;
close: close 接受一个index参数,关闭指定索引的弹窗,使用方法:boxDialog.close(2), 表示关闭索引为 2 的弹窗;若不传参数默认关闭最上层的弹窗;
closeAll: closeAll 关闭页面中所有弹窗,使用方法:boxDialog.closeAll();
msg: msg 弹出快捷信息提示,使用方法:boxDialog.msg(title,content,icon,sec), 参数都可选; 如:boxDialog.msg( '提交成功','提交成功 1s 后消失','success',1 );
alert: alert 模拟原生的alert效果,使用方法:boxDialog.alert(content,callback,w), 接受弹窗内容、点击确定按钮回调函数、弹窗宽度参数,参数都可选; 如: boxDialog.alert('提交成功');

6. 模块化使用boxDialog, 以 seajs 为例:

假如调用页面是 index.html, 包含以下代码:

seajs.config({
    base: './js/',
    alias: {
      'jquery': 'modules/jquery.min',
      'boxDialog':'../../lib/dist/boxDialog'
  	}
});
seajs.use(['jquery', 'modules/main'], function($,ex){
	$('#abc').on('click', function(){
		ex.boxDialog.alert('abc');
	});
});

main.js 是调用的模块, 包含以下代码:

define(function(require,exports,module){
	var boxDialog = require('boxDialog');
	exports.boxDialog = boxDialog;
})
以上代码可正确模块化使用 boxDialog 弹窗组件.

7. 版权提醒:

boxDialog 弹窗组件免费开源,可用于商业、非商业用途,但请保留作者信息及版本信息,无论你是用于学习还是其他,修改或者未修改源代码都请您保留作者信息,尊重作者的劳动成果并尊重开源精神。

结语:

boxDialog 已成功被多家公司使用以及某大型上市公司的多套系统、网站都在使用。boxDialog 将持续更新,优化其性能和体验,谢谢关注。

下载