Dialog

dialog layer plugin support pc and mobile

see demo

• pc dialog
• mobile dialog

dialog.js

base options

Param	Type	Default	Details
className	string		className
container	string	body	dom element
css	object	{ padding: '10px' }	css object
html	string	'加载中...'	html
title	string	'信息'	html
left	string|number	'50%'	dialog position
top	string|number	'50%'	dialog position
align	string	center	buttons algin positon left center right
drag	object	options	drag and drop
animate	boolean	false	fade animation
animateAlign	string	bottom	fade animation direction
shade	boolean	true	whether to display the shade layer
shadeClose	boolean	false	the shade layer auto close
opacity	number	0.5	the shade layer opacity
delay	boolean|number	false	close time interval, in ms. If the value is true, the default is 1800ms. the value is false, the not close
unload	boolean	true	unbind event and destory DOM element
fixed	boolean	false	fixed positioned dialog layer
isMove	boolean	true	drag and drop move the dialog layer
buttons	array	[{ name: '确定', callback: function(){}, disabled: false, focus: false }]	dialog position
closeBtnFn	function	function(){}	Function to execute when the button is closed
beforeFn	function	function(){}	Function that are executed before the initialization
afterFn	function	function(){}	Function that are executed after the initialization

drag options

Param	Type	Default	Details
limit	boolean	true	whether to let the dialog layer limit range
range	array	[ 0, 9999, 9999, 0 ]	top-right-bottom-left limit range
lockX	boolean	false	lock X axis does not move
lockY	boolean	false	lock Y axis does not move
onStart	function	function(){}	drag the start of execution
onMove	function	function(){}	draging to execute function
onEnd	function	function(){}	drag the end of execution

prompt options

Param	Type	Default	Details
value	string		value

iframe options

Param	Type	Default	Details
src	url	about:blank	address of the resource
scrolling	string	auto	iframe window overflow scroll
winBtn	boolean	true	add buttons min restore full
onloadFn	function	function(){}	Function after the completion of the iframe load

Instance Methods

.title()

/**
 * @param {string} title contents
 * @return title
 */
var dialogAlert = Dialog.alert( '成功', function(){} );
var title = dialogAlert.title();
console.log( title );

.html()

/**
 * @param {string} html contents
 * @return this
 */
var dialogAlert = Dialog.alert( '成功', function(){} );
var title = dialogAlert.html( '内容' ).title( '标题' );
console.log( title );

.buttons()

/**
 * @param {array} buttons array
 * @return this
 */
var dialogAlert = Dialog.alert( '成功', function(){} );

dialogAlert.buttons([{
    name: '取消',
    callback: function(){},
    disabled: false,
    focus: false
}]).html( '内容' );

.moveTo()

/**
 * @param {number|string} top position
 * @param {number|string} left position
 * @return this
 */
var dialogPage = Dialog({
	title: 'title',
	html: 'do something'
});
dialogPage.moveTo( '50%', '100%' );

.hide()

/**
 * @return this
 */
var dialogAlert = Dialog.alert( '成功', function(){} );

dialogAlert.hide();

.show()

/**
 * @return this
 */
var dialogAlert = Dialog.alert( '成功', function(){} );

dialogAlert.show();

.close()

/**
 * hide or destory the dialog instance
 */
var dialogAlert = Dialog.alert( '成功', function(){} );

dialogAlert.close();

.unload()

/**
 * unbind event and destory dom element
 */
var dialogAlert = Dialog.alert( '成功', function(){} );

dialogAlert.unload();

.closeAll()

/**
 * close all of dialog layers on the page
 */
var dialogAlert1 = Dialog.alert( '成功', function(){} );
var dialogAlert2 = Dialog.alert( '成功', function(){} );

dialogAlert1.closeAll();

dialog-mobile.js

base

Param	Type	Default	Details
className	string		className
type	string	load	load tip confirm alert page
html	string		dialog content html
mask	boolean	true	shows or hides the mask layer
maskClose	boolean	true	bind close event to mask layer
animation	string | boolean	false	css3 animation
unload	boolean	true	destroy dialog object
buttons	array	{ name: '取消', callback: function(){} }, { name: '确认', callback: function(){} }	buttons param
init	function	function(){}	init callback
closeBtn	function	function(){}	close button is clicked

#### Creating a Dialog ```js /** * @prama { object } dialog options * @return Dialog */ Dialog.create( options );

/**

• @prama { string } 消息内容
• @prama { number|boolean } 可选 时间延长,false不消失
• @prama { boolean } 可选 mask点击关闭
• @return Dialog */ Dialog.load( '成功', false );

/**

• @prama { string } 消息内容
• @prama { function } ok button callback
• @prama { function } cancel button callback
• @prama { boolean } 可选 mask点击关闭
• @return Dialog */ Dialog.confirm( '成功', function(){}, function(){} );

/**

• @prama { string } 消息内容
• @prama { function } ok button callback
• @prama { boolean } 可选 mask点击关闭
• @return Dialog */ Dialog.alert( '成功', function(){} );

/**

• @prama { string } 消息内容
• @prama { number|boolean } 时间延长,false不消失
• @prama { boolean } mask点击关闭
• @prama { function } closed callback
• @return Dialog */ Dialog.tip( '成功', 1200, true, function(){} );

/**

• @prama { string } 消息内容
• @prama { function } closed callback
• @prama { boolean } mask点击关闭
• @return Dialog */ Dialog.page( '成功', 1200, true, function(){} );

/**

• @prama { object } dialog object 设置全局默认参数 */ Dialog.config( options )

### Method
.close()

by calling the unload or hide to the config.
```js
Dialog.tip( '成功', false).close()

.unload()

The public destroy() method can be used to free some memory, remove dom and off event.

var tip = Dialog.tip( '成功', false);
tip.unload()

.hide()

var tip = Dialog.tip( '成功', false);
tip.hide();

.show()

var tip = Dialog.tip( '成功', false);
tip.show()