Javascript Dialog

特点

• 零依赖（原生JS实现，不依赖于任何库）
• 完全免费开源
• 使用 rollup.js 打包

快速开始

head 引入样式

<link rel="stylesheet" href="dialog.min.css">

页面底部引入 JS 文件

<script src="dialog.min.js"></script>

结构

<div id="demoA01" style="display:none"></div>

调用

var dialogA01 = new Dialog(document.querySelector('#demoA01'));

配置

属性	名称	值类型	默认值	备注
title	窗口标题	String	提示
width	窗口宽度	String	500px
height	窗口高度	String	auto
fullscreen	是否全屏显示	Boolean	false
customClass	自定义Class	String	Null
showClose	提示	Boolean	是否显示关闭按钮
showToggle	是否显示最大化、最小化按钮	Boolean	false
modal	是否显示遮罩层	Boolean	false
drag	是否支持拖动	Boolean	false
closeOnClickModal	是否支持点击遮罩层关闭	Boolean	false
footer	底部是否显示	Boolean	false
cancelButtonText	取消按钮文本	String	取消
submitButtonText	确认按钮文本	String	确定
cancelCallBack	取消按钮回调函数	Function	Null
submitCallBack	确认按钮回调函数	Function	Null
beforeClose	关闭前回调	Function	Null

实例

默认配置

var dialogA01 = new Dialog(document.querySelector('#demoA01'));

默认打开全屏显示

var dialogA02 = new Dialog(document.querySelector('#demoA02'), {
	fullscreen: true
});

支持最大化

var dialogA03 = new Dialog(document.querySelector('#demoA03'), {
	showToggle: true
});

支持拖动

var dialogA04 = new Dialog(document.querySelector('#demoA04'), {
	drag: true
});

自定义尺寸

var dialogA05 = new Dialog(document.querySelector('#demoA05'), {
	width:'800px',
	height:'600px'
});

隐藏底部按钮

var dialogA06 = new Dialog(document.querySelector('#demoA06'), {
	footer:false
});

不显示遮罩层

var dialogA07 = new Dialog(document.querySelector('#demoA07'), {
	modal: false
});

自定义Class

var dialogA08 = new Dialog(document.querySelector('#demoA08'), {
	customClass: 'myDialog'
});

自定义标题

var dialogA09 = new Dialog(document.querySelector('#demoA09'), {
	title: '添加收货地址'
});

点击遮罩层关闭窗口

var dialogA10 = new Dialog(document.querySelector('#demoA10'), {
	closeOnClickModal: true
});

自定义底部按钮文字

var dialogA11 = new Dialog(document.querySelector('#demoA11'), {
	submitButtonText: "yes",
	cancelButtonText: "no"
});

底部按钮事件

var dialogA12 = new Dialog(document.querySelector('#demoA12'), {
	cancelCallBack: function (element) {
		alert('点击了取消按钮');
		//return true 关闭窗口
		return false;
	},
	submitCallBack: function (element) {
		alert('点击了确认按钮');
		//return true 关闭窗口
		return false;
	}
});

关闭窗口前执行的方法

var dialogA13 = new Dialog(document.querySelector('#demoA13'), {
	beforeClose: function (element) {
		alert('窗口关闭前执行');
		//return true 关闭窗口
		return false;
	}
});

Browser support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 9+

License

MIT © lzread