jQuery弹出框样式自定义PopModal插件



56 223 75



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

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