jQuery彈出框樣式自定義PopModal插件



60 238 80



特效描述:jQuery 彈出框樣式 自定義PopModal插件,jQuery彈出框樣式自定義PopModal插件

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="popModal.css">

2. 引入JS

<script src="jquery.js"></script>
<script src="popModal.js"></script>

3. HTML代碼

<br>
<div id="page">
<h2>popModal</h2>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">default params</div>
			<button id="popModal_ex1">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p><span class="text">$('</span><span class="tag">#elem</span><span class="text">').popModal(</span>{</p>
			<p class="tab"><span class="key">html</span> : <span class="val">$('#content').html()</span>,</p>
			<p class="tab"><span class="key">placement</span> : <span class="val">'bottomLeft'</span>,</p>
			<p class="tab"><span class="key">showCloseBut</span> : <span class="val">true</span>,</p>
			<p class="tab"><span class="key">onDocumentClickClose</span> : <span class="val">true</span>,</p>
			<p class="tab"><span class="key">onOkBut</span> : <span class="val">function(){ }</span>,</p>
			<p class="tab"><span class="key">onCancelBut</span> : <span class="val">function(){ }</span>,</p>
			<p class="tab"><span class="key">onLoad</span> : <span class="val">function(){ }</span>,</p>
			<p class="tab"><span class="key">onClose</span> : <span class="val">function(){ }</span></p>
			<p>}<span class="text">)</span>;</p>
		</code></pre></div>
	</div>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">loading ajax</div>
			<button id="popModal_ex2">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p><span class="text">$('</span><span class="tag">#elem</span><span class="text">').popModal(</span>{</p>
			<p class="tab"><span class="key">html</span> : <span class="val">function</span><span class="text">(</span><span class="var2">callback</span><span class="text">)</span>{</p>
			<p class="tab2"><span class="text">$.ajax(</span>{<span class="key">url</span> : <span class="val">'ajax.html'</span>}<span class="text">).done(</span><span class="val">function</span><span class="text">(</span><span class="var">content</span><span class="text">)</span>{</p>
			<p class="tab3"><span class="var2">callback</span><span class="text">(</span><span class="var">content</span><span class="text">)</span>;</p>
			<p class="tab2">}<span class="text">)</span>;</p>
			<p class="tab">}</p>
			<p>}<span class="text">)</span>;</p>
		</code></pre></div>
	</div>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">inline bind</div>
			<button id="popModal_ex3" data-popModalBind="#content">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p>&lt;<span class="tag">button</span> <span class="key">id</span>=<span class="val">"elem"</span> <span class="key">data-popModalBind</span>=<span class="val">"#content"</span> <span class="key">data-placement</span>=<span class="val">"bottomLeft"</span> <span class="key">data-showCloseBut</span>=<span class="val">"true"</span> <span class="key">data-overflowContent</span>=<span class="val">"true"</span> <span class="key">data-onDocumentClickClose</span>=<span class="val">"true"</span>&gt;<span class="text">example</span>&lt;/<span class="tag">button</span>&gt;</p>
		</code></pre></div>
	</div>
	<br><br>
	<h2>notifyModal</h2>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">default params</div>
			<button id="notifyModal_ex1">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p><span class="text">$('</span><span class="tag">#content</span><span class="text">').notifyModal(</span>{</p>
			<p class="tab"><span class="key">duration</span> : <span class="val">2500</span>,</p>
			<p class="tab"><span class="key">placement</span> : <span class="val">'center'</span>,</p>
			<p class="tab"><span class="key">overlay</span> : <span class="val">true</span>,</p>
			<p>}<span class="text">)</span>;</p>
		</code></pre></div>
	</div>
	<br><br>
	<h2>hintModal</h2>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">default params</div>
			<button id="notifyModal_ex1" class="hintModal">Example
				<div class="hintModal_container">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</div>
			</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p>&lt;<span class="tag">span</span> <span class="key">class</span>=<span class="val">"hintModal"</span>&gt;<span class="text">example</span></p>
			<p class="tab">&lt;<span class="tag">div</span> <span class="key">class</span>=<span class="val">"hintModal_container"</span>&gt;</p>
			<p class="tab2"><span class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span></p>
			<p class="tab">&lt;/<span class="tag">div</span>&gt;</p>
			<p>&lt;/<span class="tag">span</span>&gt;</p>
		</code></pre></div>
	</div>
	<br><br>
	<h2>dialogModal</h2>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">default params</div>
			<button id="dialogModal_ex1">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p><span class="text">$('</span><span class="tag">#content</span><span class="text">').dialogModal(</span>{</p>
			<p class="tab"><span class="key">onOkBut</span> : <span class="val">function(){ }</span>,</p>
			<p class="tab"><span class="key">onCancelBut</span> : <span class="val">function(){ }</span>,</p>
			<p class="tab"><span class="key">onLoad</span> : <span class="val">function(){ }</span>,</p>
			<p class="tab"><span class="key">onClose</span> : <span class="val">function(){ }</span>,</p>
			<p>}<span class="text">)</span>;</p>
		</code></pre></div>
	</div>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">inline bind</div>
			<button id="dialogModal_ex2" data-dialogModalBind=".dialog_content">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p>&lt;<span class="tag">button</span> <span class="key">data-dialogModalBind</span>=<span class="val">"#content"</span>&gt;<span class="text">example</span>&lt;/<span class="tag">button</span>&gt;</p>
		</code></pre></div>
	</div>
	<br><br>
	<h2>titleModal</h2>
	<div class="exampleContainer">
		<div class="exampleLive">
			<div class="exampleLiveTitle">default params</div>
			<button id="titleModal_ex1" title="Title" data-titleModal="init">Example</button>
		</div>
		<div class="exampleCode"><pre><code>
			<p>&lt;<span class="tag">button</span> <span class="key">title</span>=<span class="val">"Title"</span> <span class="key">data-titleModal</span>=<span class="val">"init"</span> <span class="key">data-placement</span>=<span class="val">"bottom"</span>&gt;<span class="text">Example</span>&lt;/<span class="tag">button</span>&gt;</p>
		</code></pre></div>
	</div>
<div style="display:none">
<div id="content" >
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	<div class="popModal_footer">
		<button type="button" data-popModalBut="ok">ok</button>
		<button type="button" data-popModalBut="cancel">cancel</button>
	</div>
</div>
<div id="content2dasf" >
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	<div class="popModal_footer">
		<button type="button" data-popModalBut="ok">ok</button>
		<button type="button" data-popModalBut="cancel">cancel</button>
	</div>
</div></div>
<div id="content2" style="display:none">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="dialog_content" class="dialog_content" style="display:none">
	<div class="dialogModal_header">Dialog header 1</div>
	<div class="dialogModal_content">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</div>
	<div class="dialogModal_footer">
		<button type="button" data-dialogModalBut="ok">ok</button>
		<button type="button" data-dialogModalBut="cancel">cancel</button>
	</div>
</div>
<div id="dialog_content2" class="dialog_content" style="display:none">
	<div class="dialogModal_header">Dialog header 2</div>
	<div class="dialogModal_content">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</div>
	<div class="dialogModal_footer">
		<button type="button" data-dialogModalBut="ok">ok</button>
		<button type="button" data-dialogModalBut="cancel">cancel</button>
	</div>
</div>
<script>
$(function(){
	$('#popModal_ex1').click(function(){
		$('#popModal_ex1').popModal({
			html : $('#content'),
			placement : 'bottomLeft',
			showCloseBut : true,
			onDocumentClickClose : true,
			onOkBut : function(){},
			onCancelBut : function(){},
			onLoad : function(){},
			onClose : function(){}
		});
	});
	$('#popModal_ex2').click(function(){
		$('#popModal_ex2').popModal({
			html : function(callback) {
				$.ajax({url:'ajax.html'}).done(function(content){
					callback(content);
				});
			}
		});
	});
	$('#notifyModal_ex1').click(function(){
		$('#content2').notifyModal({
			duration : 2500,
			placement : 'center',
			overlay : true
		});
	});
	$('#dialogModal_ex1').click(function(){
		$('.dialog_content').dialogModal({
			onOkBut: function() {},
			onCancelBut: function() {},
			onLoad: function() {},
			onClose: function() {},
		});
	});
});
</script>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 浮動菜單 浮動導航 提示框/彈出層
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子