基于jQuery实现弹出窗工具提示插件



31 120 41



特效描述:基于jQuery实现 弹出窗 工具提示,基于jQuery实现弹出窗工具提示插件

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<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 style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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