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