jQuery alert.js彈出層插件代碼



97 386 129



特效描述:jQuery alert.js 彈出層插件代碼,jQuery alert.js彈出層插件代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="js/SyntaxHighlighter/shCoreDefault.css">
<link rel="stylesheet" href="css/alert.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/jquery-1.9.0.min.js'></script>
<script src='js/SyntaxHighlighter/shCore.js'></script>
<script src='js/SyntaxHighlighter/makeSy.js'></script>
<script src='js/alert.js'></script>
<script src='js/alert-api.js'></script>

3. HTML代碼

<p class="t_c f24 alert-api-txt m30 w1004">alert.js說明文檔</p>
<div class="w1004 alert-box">
	<div class="alert-api-list">
		<p class="f18 alert-api-title">演示demo</p>
		<ul class="alert_list">
			<li><a class="alert-api-hover" href="#tishi">提示</a></li>
			<li><a href="#anniu1">按鈕1</a></li>
			<li><a href="#anniu2">按鈕2</a></li>
			<li><a href="#noAnimate">不使用動畫</a></li>
			<li><a href="#animate2">動畫2</a></li>
			<li><a href="#buhuo">捕獲頁</a></li>
			<li><a href="#iframe1">iframe層</a></li>
			<li><a href="#iframe2">iframe窗</a></li>
			<li><a href="#pcAlert">pc彈層</a></li>
		</ul>
		<p class="f18 alert-api-title">基礎參數</p>
		<ul class="alert_list">
			<li><a href="#style">style</a></li>
			<li><a href="#title">title   </a></li>
			<li><a href="#content">content	</a></li>
			<li><a href="#contentTextAlign">contentTextAlign</a></li>
			<li><a href="#width">width</a></li>	
			<li><a href="#height">height</a></li>	
			<li><a href="#minWidth">minWidth</a></li>	
			<li><a href="#className">className</a></li>	
			<li><a href="#position">position</a></li>	
			<li><a href="#animateType">animateType</a></li>	
			<li><a href="#modal">modal</a></li>	
			<li><a href="#isModalClose">isModalClose</a></li>	
			<li><a href="#bodyScroll">bodyScroll</a></li>	
			<li><a href="#closeTime">closeTime</a></li>	
			<li><a href="#buttons">buttons	</li>
		</ul>
		<p class="f18 alert-api-title">返回對象</p>
		<ul class="alert_list">
			<li><a href="#dialog">dialog</a></li>
		</ul>
		<p class="f18 alert-api-title">內置方法</p>
		<ul class="alert_list">
			<li><a href="#dialog_close">dialog.close</a></li>
			<li><a href="#dialog_show">dialog.show</a></li>
			<li><a href="#dialog_destroy">dialog.destroy </a></li>
		</ul>
	</div>
	<div class="alert-api-box">	
		<div class="alert-api-intro">
		<p class="alert-api-intro-msg">
			<span class="f18">alert.js彈層說明</span> 
			<span class="f14 red" style="margin-left:20px">此為 PC 和 手機 都兼容的彈層組件</span>
		</p>
		<div class="m20 blockquote">
			alert.js是基于jQuery開發的一款 <span class="red"> PC  移動端 </span> 都兼容的輕量級彈層組件
		</div>
		<p class="f18 m20">評分</p>
		<div class="m20 blockquote">
			<p>如果覺得好用,記得給我們留言哦</p>
		</div>
		<p class="f18 m20">瀏覽器兼容</p>
		<div class="m20 blockquote" id="alert-blockquote">
			 <p class="f16">瀏覽器兼容,下面是我們的主要兼容目標</p>
			 <p class="f14">1、IE8 或者 IE8以上 (Windows), <span class="red">IE8以下瀏覽器不兼容</p>
			 <p class="f14">2、Safari (Mac)</p>
			 <p class="f14">3、Chrome (Windows, Mac, Linux)</p>
			 <p class="f14"> 4、Firefox (Windows, Mac,  Linux)</p>
			 <p class="f14">5、谷歌內核(webkit)瀏覽器,如360瀏覽器,搜狗瀏覽器,QQ瀏覽器等</p>
		</div>
		<p class="f18 m20 blue">核心方法(配置): jqueryAlert(opts)</p>
		<div class="m20 blockquote">
			opts是一個對象,它包含了以下key: '默認值'
		</div>
		<p class="m20 blue brush-title">javascript 代碼:</p>
		<pre class="brush:javascript;toolbar:false">
					'style'        : 'wap', //移動端和PC端
					'title'        : '',    //標題
					'content'      : '',	//內容
					'contentTextAlign' : 'center', //內容對齊方式
					'width'        : 'auto', //寬度
					'height'       : 'auto', //高度
					'minWidth'     : '0', //最小寬度
					"className"    : '', //添加類名
					'position'     : 'fixed', //定位方式
					'animateType'  : 'scale',
					'modal'        : false, //是否存在蒙層
					'isModalClose' : false, //點擊蒙層是否關閉
					'bodyScroll'   : false, //是否關閉body的滾動條
					'closeTime'    : 3000, //當沒有按鈕時關閉時間
					"buttons"      : {}, //按鈕對象</pre>
			<fieldset class="m20 fieldset">
				<legend>實例演示</legend>
				<button class="alert-api-button alert-btn1">提示</button>
				<button class="alert-api-button alert-btn2">按鈕1</button>
				<button class="alert-api-button alert-btn3">按鈕2</button>
				<button class="alert-api-button alert-btn4">不使用動畫</button>
				<button class="alert-api-button alert-btn5">動畫2</button>
				<button class="alert-api-button alert-btn6">捕獲頁</button>
				<button class="alert-api-button alert-btn7">iframe層</button>
				<button class="alert-api-button alert-btn8">iframe窗</button>
				<button class="alert-api-button alert-btn9">pc彈層</button>
			</fieldset>
			<p id="tishi" class="m20 blue brush-title"><button class="alert-api-button alert-btn1">提示</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog1){
				return M.dialog1.show();
			}
			M.dialog1 = jqueryAlert({
				'content' : 'hello 程序員...'
			})</pre>
			<p id="anniu1" class="m20 blue brush-title"><button class="alert-api-button alert-btn2">按鈕1</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog2){
				return M.dialog2.show();
			}
			M.dialog2 = jqueryAlert({
				'content' : 'hello 程 序 員 ...',
				'modal'   : true,
				'buttons' :{
					'確定' : function(){
						M.dialog2.close();
					}
				}
			})</pre>
			<p id="anniu2" class="m20 blue brush-title"><button class="alert-api-button alert-btn3">按鈕2</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog3){
				return M.dialog3.show();
			}
			M.dialog3 = jqueryAlert({
				'title'   : 'alertjs提示',
				'content' : '歡迎使用alertjs彈層 ...',
				'modal'   : true,
				'buttons' :{
					'確定' : function(){
						M.dialog3.close();
					},
					'我不是' : function(){
						if(M.dialog31){
							return M.dialog31.show();
						}
						M.dialog31 = jqueryAlert({
							'content' : '我不是程序員...'
						})
					}
				}
			})</pre>
			<p id="noAnimate" class="m20 blue brush-title"><button class="alert-api-button alert-btn4">不使用動畫</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
				// 判斷是否已存在,如果已存在則直接顯示
				if(M.dialog4){
					return M.dialog4.show();
				}
				M.dialog4 = jqueryAlert({
					'title'   : 'alertjs提示',
					'content' : '歡迎使用alertjs彈層 ...',
					'modal'   : true,
					'animateType' : '',
					'buttons' :{
						'確定' : function(){
							M.dialog4.close();
						},
						'不使用' : function(){
							if(M.dialog41){
								return M.dialog41.show();
							}
							M.dialog41 = jqueryAlert({
								'content' : '祝您找到更好用的...'
							})
						}
					}
				})</pre>
			<p id="animate2" class="m20 blue brush-title"><button class="alert-api-button alert-btn5">動畫2</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog5){
				return M.dialog5.show();
			}
			M.dialog5 = jqueryAlert({
				'content' : alertContent ,
				'modal'   : true,
				'contentTextAlign' : 'left',
				'width'   : '450px',
				'animateType' : 'linear',
				'buttons' :{
					'不同意' : function(){
						M.dialog5.close();
					},
					'同意' : function(){
						if(M.dialog51){
							return M.dialog51.show();
						}
						M.dialog51 = jqueryAlert({
							'content' : '同意也不能注冊哦...'
						})
					}
				}
			})</pre>
			<p id="buhuo" class="m20 blue brush-title"><button class="alert-api-button alert-btn6">捕獲頁</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog6){
				return M.dialog6.show();
			}
			M.dialog6 = jqueryAlert({
				'style'   : 'pc',
				'title'   : '捕獲頁',
				'content' :  $("#alert-blockquote"),
				'modal'   : true,
				'contentTextAlign' : 'left',
				'width'   : 'auto',
				'animateType' : 'linear',
				'buttons' :{
					'關閉' : function(){
						M.dialog6.close();
					},
				}
			})</pre>
			<p id="iframe1" class="m20 blue brush-title"><button class="alert-api-button alert-btn7">iframe層</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog7){
				return M.dialog7.show();
			}
			M.dialog7 = jqueryAlert({
				'style'   : 'pc',
				'title'   : 'iframe層',
				'content' :  alertContent,
				'modal'   : true,
				'contentTextAlign' : 'left',
				'width'   : '400',
				'height'  : '300',
				'animateType' : 'linear',
				'buttons' :{
					'關閉' : function(){
						M.dialog7.close();
					},
				}
			})</pre>
			<p id="iframe2" class="m20 blue brush-title"><button class="alert-api-button alert-btn8">iframe窗</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog8){
				return M.dialog8.show();
			}
			M.dialog8 = jqueryAlert({
				'style'   : 'pc',
				'title'   : 'iframe窗',
				'content' :  $(".alert-box"),
				'modal'   : true,
				'contentTextAlign' : 'left',
				'width'   : '90%',
				'height'  : '90%',
				'animateType': 'scale',
			})</pre>
			<p id="pcAlert" class="m20 blue brush-title"><button class="alert-api-button alert-btn9">PC彈層</button> 參數配置</p>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog9){
				return M.dialog9.show();
			}
			M.dialog9 = jqueryAlert({
				'style'   : 'pc',
				'title'   : 'pc彈層',
				'content' :  'PC端普通彈層呦呦呦...',
				'modal'   : true,
				'contentTextAlign' : 'left',
				'animateType': 'scale',
				'bodyScroll' : 'true',
				'buttons' : {
					'關閉' : function(){
						M.dialog9.close();
					},
					'去首頁' : function(){
						location.href="http://www.datouwang.com";
					}
				}
			})</pre>
			<p class="f24 m30">基本參數</p>
			<p id="style" class="alert-api-api "><span class="blue f18">style </span>- String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:'wap'</p>
				<p><span class="blue">選項</span>:<span class="str_bg">wap</span><span class="str_bg">pc</span></p>
				<p><span class="blue">釋義</span>:設置顯示樣式</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'style' :  'wap',
			})</pre>
			<p id="title" class="alert-api-api "><span class="blue f18">title </span>- String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:''</p>
				<p><span class="blue">釋義</span>:設置標題</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'title' :  '溫馨提示',
			})</pre>
			<p id="content" class="alert-api-api "><span class="blue f18">content </span>- String/jQuery對象</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:''</p>
				<p><span class="blue">釋義</span>:設置內容</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'content' :  '普通彈層呦呦呦...',
			})</pre>
			<p id="contentTextAlign" class="alert-api-api "><span class="blue f18">contentTextAlign </span>- String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:center</p>
				<p><span class="blue">選項</span>:<span class="str_bg">center</span><span class="str_bg">left</span><span class="str_bg">right</span></p>
				<p><span class="blue">釋義</span>:設置內容對齊方式</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'contentTextAlign' : "left",
			})</pre>
			<p id="width" class="alert-api-api "><span class="blue f18">width </span>- Number/String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:auto</p>
				<p><span class="blue">釋義</span>:設置寬度</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'width' : "500",
			})</pre>
			<p id="height" class="alert-api-api "><span class="blue f18">height </span>- Number/String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:auto</p>
				<p><span class="blue">釋義</span>:設置高度</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'height' : "500",
			})</pre>
			<p id="minWidth" class="alert-api-api "><span class="blue f18">minWidth </span>- Number/String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:0</p>
				<p><span class="blue">釋義</span>:設置最小寬度</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'minWidth' : "160",
			})</pre>
			<p id="className" class="alert-api-api "><span class="blue f18">className </span>- String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:""</p>
				<p><span class="blue">釋義</span>:給彈層添加一個特殊的類名,方便調整自己的樣式</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'className' : "myDialog1",
			})</pre>
			<p id="position" class="alert-api-api "><span class="blue f18">position </span>- String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:fixed</p>
				<p><span class="blue">選項</span>:<span class="str_bg">fixed</span><span class="str_bg">absolute</span></p>
				<p><span class="blue">釋義</span>:使用定位情況</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'position' : "fixed",
			})</pre>
			<p id="animateType" class="alert-api-api "><span class="blue f18">animateType </span>- String</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:scale</p>
				<p><span class="blue">選項</span>:<span class="str_bg">scale</span><span class="str_bg">linear</span><span class="str_bg">為空或其他則為fadeIn動畫</span></p>
				<p><span class="blue">釋義</span>:使用動畫</p>
				<p><span class="blue">Bug</span>:在IE8下動畫效果失效</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'animateType' : "scale",
			})</pre>
			<p id="modal" class="alert-api-api "><span class="blue f18">modal </span>- Boolean</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:false</p>
				<p><span class="blue">釋義</span>:是否添加蒙層</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'modal' : true,
			})</pre>
			<p id="isModalClose" class="alert-api-api "><span class="blue f18">isModalClose </span>- Boolean</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:false</p>
				<p><span class="blue">釋義</span>:點擊蒙層時是否關閉</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'isModalClose' : true,
			})</pre>
			<p id="bodyScroll" class="alert-api-api "><span class="blue f18">bodyScroll </span>- Boolean</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:false</p>
				<p><span class="blue">釋義</span>:彈出蒙層是否禁止滾動</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'bodyScroll' : true,
			})</pre>
			<p id="closeTime" class="alert-api-api "><span class="blue f18">closeTime </span>- number</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:3000</p>
				<p><span class="blue">釋義</span>:如果所有按鈕不存在并且style參數 != 'pc'則此參數生效</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'closeTime' : 3000,
			})</pre>
			<p id="buttons" class="alert-api-api "><span class="blue f18">buttons </span>- Object</p>
			<div class="m20 blockquote">
				<p><span class="blue">默認</span>:{}</p>
				<p><span class="blue">釋義</span>:只能傳入key:callback形式,可為多個</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
				'buttons' : {
					'確定' : function(){
						dialog.close();
					},
					'我不是' : function(){
						alert(11)
					}
				}
			})</pre>
			<p class="f24 m30">返回對象</p>
			<p id="dialog" class="alert-api-api "><span class="blue f18">dialog </span>- Object</p>
			<div class="m20 blockquote">
				<p><span class="blue">釋義</span>:組件內部返回dialog對象,需要變量做接收</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			var dialog = jqueryAlert({
			})</pre>
			<p class="f24 m30">內置方法</p>
			<p id="dialog_close" class="alert-api-api "><span class="blue f18">close() </span>- 關閉當前窗口</p>
			<div class="m20 blockquote">
				<p><span class="blue">釋義</span>:關閉當前窗口方法</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			M.dialog = jqueryAlert({
				'buttons' : {
					'關閉' : function(){
						M.dialog.close() //關閉
					}
				}
			})</pre>
			<p id="dialog_show" class="alert-api-api "><span class="blue f18">show() </span>- 當DOM元素已經存在時,調用</p>
			<div class="m20 blockquote">
				<p>如果不想每次都重新生成一遍模板,那么必須加上這段代碼</p>
				<p><span class="blue">釋義</span>:如果M.dialog存在,則直接調用 show方法</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			// 判斷是否已存在,如果已存在則直接顯示
			if(M.dialog){
				return M.dialog.show();
			}
			M.dialog = jqueryAlert({
			})</pre>
			<p id="dialog_destroy" class="alert-api-api "><span class="blue f18">destroy() </span>- 銷毀組件的HTML代碼</p>
			<div class="m20 blockquote">
				<p>如果想每次都重新生成一遍模板,那么把上次的代碼銷毀掉是必要的</p>
				<p><span class="blue">釋義</span>:當關閉時銷毀掉組件的html代碼</p>
			</div>
			<pre class="brush:javascript;toolbar:false">
			M.dialog = jqueryAlert({
				'buttons' : {
					'關閉' : function(){
						M.dialog.destroy() //銷毀掉
					}
				}
			})</pre>
	</div>
</div>



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


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 提示框/彈出層 疊加浮動層 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表