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