layer彈出框官方網址：http://layer.layui.com/
layer常用方法的封裝：layerTool.jsp
layer.config({ extend: 'extend/layer.ext.js', //注意，目錄是相對layer.js根目錄。如果加載多個，則 [a.js, b.js, …] shift: 0//默認動畫風格 }); function Layer(){} ; Layer.prototype = { toplayer : window.top.layer , // 獲取頂層窗口的layer對象 topWin : window.top , // 獲取頂層窗口對象 colseTime : 1000 , // 關閉彈出框的默認時間 1S width : '800px', // 默認窗口的寬度 height : '600px', // 默認窗口的高度 px : 'px' , // 對話框寬高單位 /** * 警告框 * @param {} content 警示的內容 */ showAlert : function(content){ this.toplayer.alert(content,{icon:0}); }, /** * 操作成功提示框 * @param {} content 提示內容 默認：操作成功 * @param {} callback 回調方法 */ showSucAlert : function (content,callback){ var length = arguments.length ; // 實際傳入參數的長度 var options = {icon:1,time:this.colseTime}; if(length == 0){ // 沒有傳入任何參數 this.toplayer.alert("操作成功",options); }else if(length == 1){ // 傳入了提示內容 this.toplayer.alert(content,options); }else if(length == 2){ // 有回調函數的,將不自動關閉 this.toplayer.alert(content,{icon:1},callback); } }, /** * 操作失敗提示框 * @param {} content 提示內容 默認：操作失敗 * @param {} time 關閉時間(單位毫秒) 默認：1S,0:表示不自動關閉 */ showFailAlert : function(content,time){ var length = arguments.length ; // 實際傳入參數的長度 var options = {icon:2,time:this.colseTime}; if(length == 0){ // 沒有傳入任何參數 this.toplayer.alert("操作失敗",options); }else if(length == 1){ // 傳入了提示內容 this.toplayer.alert(content,options); }else if(length == 2){ // 傳入了關閉時間 options.time = time ; this.toplayer.alert(content,options); } }, /** * 打開一個對話框(沒有回調函數) * @param {} title 對話框標題(必須) * @param {} url 對話框URL(必須) * @param {} width 對話框寬度 默認：800px * @param {} height 對話框高低 默認：600px */ openDialogNoCallBack : function(title,url,width,height){ this.toplayer.open({ type : 2, title : title , content : url , maxmin: true, area: [width, height] }); }, /** * 獲取當前的窗口對象 * @return {} */ getCurrentWin : function(){ return this.topWin.frames['ifr_center'] ; }, /** * 打開一個對話框(帶回調函數) * @param {} title 對話框標題(必須) * @param {} url 對話框URL(必須) * @param {} width 對話框寬度 默認：800px * @param {} height 對話框高低 默認：600px */ openDialogWithCallBack : function(title,url,width,height,callback){ this.toplayer.open({ type : 2, title : title , content : url , area: [width, height], maxmin: true, end : callback }); }, /** * 打開一個對話框(沒有回調函數) * @param {} title 對話框標題(必須) * @param {} url 對話框URL(必須) * @param {} width 對話框寬度 默認：800px * @param {} height 對話框高低 默認：600px * @param {} callback 窗口銷毀時的回調方法 */ openDialog : function(title,url,width,height,callback){ var length = arguments.length ; // 實際傳入參數的長度 if(length == 2){ // 默認寬高 this.openDialogNoCallBack(title,url,this.width,this.height) }else if(length == 3){ // 只傳入寬度參數 width += this.px ; this.openDialogNoCallBack(title,url,width,this.height) }else if(length == 4){ // 傳入寬度和高度 width += this.px ; height += this.px ; this.openDialogNoCallBack(title,url,width,height) }else if(length == 5){ // 帶回調函數 width += this.px ; height += this.px ; this.openDialogWithCallBack(title,url,width,height,callback); } }, /** * 關閉彈出層 * @param {} index */ closeLayer : function(index){ this.toplayer.close(index); }, /** * 關閉所有的Dialog */ closeDialog : function(){ this.toplayer.closeAll('iframe'); }, /** * 關閉Dialog帶有操作成功的提示 * @param {} content */ closeDialogWithMsg : function(content){ this.toplayer.closeAll('iframe'); if(!content) content = "操作成功" ; this.showSucMsg(content); }, /** * 顯示提示框 * @param {} content */ showMsg : function(content){ this.toplayer.msg(content,{time:this.colseTime}) ; }, /** * 顯示操作成功的提示框 * @param {} content */ showSucMsg : function(content){ if(!content) content = "操作成功" ; this.toplayer.msg(content,{icon: 1,time:this.colseTime}) ; }, /** * 顯示驗證框 * @param {} content 提示內容 * @param {} yesFunction 確定以后的回調函數 */ showConfirm : function(content,yesFunction){ this.toplayer.confirm(content,{ btn: ['確定', '取消'], icon : 3 },yesFunction); } }; var Layer = new Layer();
<!--Demo-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>LayerDemo演示</title> <script type="text/javascript" src="/ydzf/scripts/plugin/jquery/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="/ydzf/scripts/plugin/layer/layer.js"></script> <script type="text/javascript" src="/ydzf/scripts/plugin/layer/layerTool.js"></script> </head> <body> <h2>LayerDemo演示</h2> Alter <button onclick="Layer.showAlert('有問題了啊');">alert</button> <button onclick="Layer.showSucAlert();">操作成功提示框</button> <button onclick="Layer.showSucAlert('我成功了',showCall);">操作成功提示框+自定義提示內容+回調方法</button> <button onclick="Layer.showFailAlert();">操作失敗提示框</button> <button onclick="Layer.showFailAlert('我失敗了',0);">操作失敗提示框+自定義提示內容+不自動關閉</button> <br/> OpenDialog <button onclick="Layer.openDialog('我是Open窗口','demo02Edit.jsp');">對話框</button> <button onclick="Layer.openDialog('我是Open窗口','demo02Edit.jsp',400);">對話框+自定義寬</button> <button onclick="Layer.openDialog('我是Open窗口','demo02Edit.jsp',500,500);">對話框+自定義寬高</button> <br/> Message <button onclick="Layer.showMsg('我只是簡單的提示一下');">對話框</button> <button onclick="Layer.showSucMsg('我是成功的提示框')">成功的提示框</button> <br/> Confirm <button onclick="Layer.showConfirm('你確定要這樣操作嗎',function(index){alert('是的')});">Confirm對話框</button> <script type="text/javascript"> function showCall(index){ alert("我是回調奧"+index); Layer.closeLayer(index); } </script> </body> </html>