jQuery dialogBox.js對話框插件



204 812 271



特效描述: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

加群請備注:從官網了解到

老夫子电子