弹出框layer的使用封装

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>