jQuery dialogBox.js对话框插件



184 735 246



特效描述:jQuery dialogBox.js 对话框插件,jQuery dialogBox.js对话框插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/jquery.dialogbox.css">

2. 引入JS

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.dialogBox.js"></script>

3. HTML代码

<dl class="item">
	<dt>1. simple dialogBox</dt>
	<dd>
		<input type="button" id="btn-simple" value="click me" />
		<div id="simple-dialogBox"></div>
		<pre>
			<code>
			$('#btn-simple').click(function(){
				$('#simple-dialogBox').dialogBox({
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>2. stantard dialogBox</dt>
	<dd>
		<input type="button" id="btn-stantard" value="click me" />
		<div id="stantard-dialogBox"></div>
		<pre>
			<code>
			$('#btn-stantard').click(function(){
				$('#stantard-dialogBox').dialogBox({
					title: 'title text',
					hasClose: true,
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>3. custom size dialogBox</dt>
	<dd>
		<input type="button" id="btn-custom-size" value="click me" />
		<div id="custom-size-dialogBox"></div>
		<pre>
			<code>
			$('#btn-custom-size').click(function(){
				$('#custom-size-dialogBox').dialogBox({
					width: 500,
					height: 300,
					title: 'title text',
					hasClose: true,
					content: '&lt;ul&gt;&lt;li&gt;Support custom dialog box style.&lt;/li&gt;&lt;li&gt;on the high version of brwosers support a series of animation effect&lt;/li&gt;&lt;li&gt;Support adaptive popup content size&lt;/li&gt;&lt;li&gt;Support the standard and the modal dialog box&lt;/li&gt;&lt;li&gt;Support IE7+,Firefox3+,Chrome and Oprea&lt;/li&gt;&lt;/ul&gt;'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>4. auto close dialogBox</dt>
	<dd>
		<input type="button" id="btn-auto-close" value="click me" />
		<div id="auto-close-dialogBox"></div>
		<pre>
			<code>
			$('#btn-auto-close').click(function(){
				$('#auto-close-dialogBox').dialogBox({
					autoHide: true,
					time: 3000,
					title: 'title text',
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>5. mask dialogBox</dt>
	<dd>
		<input type="button" id="btn-mask" value="click me" />
		<div id="mask-dialogBox"></div>
		<pre>
			<code>
			$('#btn-mask').click(function(){
				$('#mask-dialogBox').dialogBox({
					hasClose: true,
					hasMask: true,
					title: 'title text',
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>6. btn dialogBox</dt>
	<dd>
		<input type="button" id="btn-btn" value="click me" />
		<div id="btn-dialogBox"></div>
		<pre>
			<code>
			$('#btn-btn').click(function(){
				$('#btn-dialogBox').dialogBox({
					hasClose: true,
					hasBtn: true,
					confirmValue: 'I am sure',
					confirm: function(){
						alert('this is callback function');
					},
					cancelValue: 'I will cancel',
					title: 'title text',
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>8. effect dialogBox</dt>
	<dd>
		<input type="button" id="btn-effect" value="click me" />
		<div id="effect-dialogBox"></div>
		<pre>
			<code>
			$('#btn-btn').click(function(){
				$('#btn-dialogBox').dialogBox({
					width: 500,
					height: 260,
					autoHide: true,
					time: 3000,
					effect: 'flip-horizontal',
					title: 'title text',
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<dl class="item">
	<dt>9. type dialogBox</dt>
	<dd>
		<input type="button" id="btn-type" value="click me" />
		<div id="type-dialogBox"></div>
		<pre>
			<code>
			$('#btn-type').click(function(){
				$('#type-dialogBox').dialogBox({
					type: 'correct'  //three type:'normal'(default),'correct','error',
					width: 300,
					height: 200,
					hasMask: true,
					autoHide: true,
					time: 3000,
					effect: 'fall',
					title: 'title text',
					content: 'dialog content text,image,html file'
				});
			})
			</code>
		</pre>
	</dd>
</dl>
<script type="text/javascript">
$(function(){
	//simple dialog
	$('#btn-simple').click(function(){
		$('#simple-dialogBox').dialogBox({
			content: 'dialog content text,image,html file'
		});
	})
	//stantard dialog
	$('#btn-stantard').click(function(){
		$('#stantard-dialogBox').dialogBox({
			title: 'title text',
			hasClose: true,
			content: 'dialog content text,image,html file'
		});
	})
	//custom size dialogBox
	$('#btn-custom-size').click(function(){
		$('#custom-size-dialogBox').dialogBox({
			width: 500,
			height: 300,
			title: 'title text',
			hasClose: true,
			content: '<ul><li>Support custom dialog box style.</li><li>on the high version of brwosers support a series of animation effect</li><li>Support adaptive popup content size</li><li>Support the standard and the modal dialog box</li><li>Support IE7+,Firefox3+,Chrome and Oprea</li></ul>'
		});
	})
	//auto close dialogBox
	$('#btn-auto-close').click(function(){
		$('#auto-close-dialogBox').dialogBox({
			autoHide: true,
			time: 3000,
			title: 'title text',
			content: 'dialog content text,image,html file'
		});
	})
	//mask dialogBox
	$('#btn-mask').click(function(){
		$('#mask-dialogBox').dialogBox({
			hasClose: true,
			hasMask: true,
			time: 3000,
			title: 'title text',
			content: 'dialog content text,image,html file'
		});
	})
	//btn dialogBox
	$('#btn-btn').click(function(){
		$('#btn-dialogBox').dialogBox({
			hasClose: true,
			hasBtn: true,
			confirmValue: 'I am sure',
			confirm: function(){
				alert('this is callback function');
			},
			cancelValue: 'I will cancel',
			title: 'title text',
			content: 'dialog content text,image,html file'
		});
	})
	//anamation effect dialogBox
	$('#btn-effect').click(function(){
		$('#effect-dialogBox').dialogBox({
			width: 500,
			height: 260,
			autoHide: true,
			time: 3000,
			effect: 'flip-horizontal',
			title: 'title text',
			content: 'dialog content text,image,html file'
		});
	})
	//type dialogBox
	$('#btn-type').click(function(){
		$('#type-dialogBox').dialogBox({
			type: 'correct',  //three type:'normal'(default),'correct','error',
			width: 300,
			height: 200,
			hasMask: true,
			hasClose: true,
			hasBtn: true,
			effect: 'sign',
			title: 'title text',
			content: 'dialog content text,image,html file'
		});
	})
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到