一个好用的jquery弹出层layer

插件官方地址：http://xu.sentsin.com/jquery/layer/

layer API之键值（仅在需要时配置，未配置的会用默认）
键值对	描述	备注
skin : 0	层的皮肤编号，值为整数型。	目前默认只提供一种皮肤，当你按照样式规则新增皮肤时，你需配置该参数。
shade : [0.5 , '#000' , true]	控制遮罩。0.5：遮罩透明度，'#000'：遮罩颜色，true：是否遮罩（否：false）
shadeClose : false	用来控制点击遮罩区域是否关闭层。(是：true)	实用
fix : true,	层是否固定。否：false	实用
move : ['.xubox_title' , true]	控制层拖拽。'.xubox_title'：拖拽绑定事件所在元素选择器（默认为标题栏），true：是否允许拖拽（否：false）
type : 0,	层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：小tips层	重要参数，在调用不同层类型时必须设置
title : ['信息' , true]	控制标题栏。'信息'：标题栏文字，true：是否显示标题栏（否：false）
offset : ['220px' , '50%']	控制层坐标。'220px'：纵坐标，'50%'：横坐标	较重要参数
area : ['310px' , 'auto']	控制层宽高。'310px'：宽，'auto'：高	重要参数
closeBtn : [0 , true]	控制层右上角关闭按钮。0：关闭按钮风格（1：风格2），true：是否显示关闭按钮（否：false）
time : 0	自动关闭等待秒数，整数值	实用
border : [10 , 0.3 , '#000', true]	10：边框大小，0.3：边框透明度，'#000'：边框颜色，true：是否显示边框（否：false）	通过它您可以任意配置边框，如果你觉得她碍眼，你完全可以不输出她。
zIndex : 19891014	控制层堆叠顺序（z-index）。整数值，默认是贤心的生日。	合理设置它，可以避免与其它插件的z-index冲突
maxWidth : 400	最大宽度。整数值。	当宽度设为auto时才有用。
fadeIn : [300 , false]	控制层的渐显。300：渐显频率，false：是否开启渐显（默认不开启，true:开启）	这效果，有人爱、有人厌。
dialog : { btns : 1, btn : ['确定','取消'], type : 3, msg : '', yes : function(index){ }, no : function(index){ } }	信息框层模式私有参数。 btns : 按钮的个数。提供了0-2的选择 btn : [按钮一的值 , 按钮二的值] type : 图标类型，提供了0-10的选择，可以试一试每一个图标，有你喜欢的吗？ msg : 信息框内容，重要参数 yes :按钮一的回调 no :按钮二的回调	很常用
page : {dom : '#xulayer'}	页面层模式私有参数。dom：需要弹出的html片段所对应的选择器（class 或 id，推荐用id，确保唯一。）	当你设置了type:1时，dom是必须要设置的，否则无法捕获元素。很常用。
iframe : {src : 'http://xu.sentsin.com'}	iframe层模式私有参数。src：要打开的网址	使用率非常高，尤其是对于喜欢用iframe的同学。
loading : {type : 0}	加载层私有属性。type：loading图标类型（提供了0-3的选择，试试吧，看看有无你喜欢的）	配合ajax，在执行之前使用，ajax请求成功后，必须用加载层私有方法将其关闭：LAYER.loadClose();
tips : { msg : '', follow : '' }	tips小提示层私有属性。msg：提示内容，follow：触发事件对应的选择器	tips的界面似乎戳了点，不过将就着用吧，实在不行就去layer.css改一下。
success : function(layer){}	层弹出成功后的回调函数	层展现后，你想必需要做一些其它的事件处理吧，那么，写在这里面
close : function(index){}	层右上角关闭按钮的回调函数。	想一下，有时点击关闭你是否需要做别的行为处理，那么，你应该写在这里面
end : function(){}	层被彻底关闭后执行的回调函数。	你认为她跟close回调相似？那你错了，close绑定的是关闭按钮的click事件，而end，只是单纯的一个回调，当设置了自动关闭时，它可能会派上用场不是？

layer API之内置方法
方法名	描述	备注
layer.alert()	layer对象下的方法，对单个按钮信息框层的重新封装，layer.alert(alertMsg , alertType, alertTit , alertYes),四个参数，alertMsg：信息内容（文本），alertType：提示图标（整数，0-10的选择），alertTit：标题（文本），alertYes：按钮的回调函数	如：layer.alert('前端攻城师贤心')
layer.confirm()	layer对象下的方法，对询问框的重新封装，layer.confirm(conMsg , conYes , conTit , conNo),四个参数，conMsg：信息内容（文本），conYes：按钮一回调，conTit：标题（文本），conNo：按钮二的回调	如： layer.confirm('确定删除',function(){ layer.msg('删除成功！') });
layer.msg()	layer对象下的方法，对无标题栏信息框层的重新封装，layer.msg(msgText , msgTime , msgType , maxWidth),四个参数，msgText：信息内容（文本），msgTime：自动关闭所需等待秒数（默认2秒），msgType：提示图标（整数，0-10的选择），maxWidth：最大宽度	如：layer.msg('嗨，伙计，我是layer')
layer.tips()	layer对象下的方法，对tips层的重新封装，layer.tips(html , follow , time , maxWidth),四个参数，html：信息内容（文本），follow：触发事件对应的选择器，time：自动关闭所需等待秒数，maxWidth：最大宽度	如： $('.demo').click(function(){ layer.tips('这是小提示',this); });
layer.load()	layer对象下的方法，对加载层的重新封装，layer.load(loadTime , loadgif , loadShade),三个参数，loadTime：自动关闭所需等待秒数，loadgif：加载图标（整数，0-3的选择），loadShade：是否遮罩（true 或 false）	如：layer.load(3);
LAYER.getIndex(index)	LAYER对象下的方法，开启页面层模式（type：1时）后才有用，用于获取layer的当前索引，从而协助通过非layer元素触发事件所执行的关闭方法	如： success : function(){ $('#test').click(function(){ var index = LAYER.getIndex(this); LAYER.close(index); }); }
LAYER.getChildFrame(selector)	LAYER对象下的方法，获取子iframe中的DOM	非常实用，父窗口操作iframe中内容时可以大显神威。如：LAYER.getChildFrame('body').html() //得到iframe的body的全部html元素
LAYER.getFrameIndex()	LAYER对象下的方法，得到iframe层的索引，子iframe操作父窗口时使用	$('#a').click(function(){ var index = parent.LAYER.getFrameIndex(); parent.LAYER.close(index); });
LAYER.close(index)	LAYER对象下的方法，用于在执行回调后关闭层	如： yes : function(index){ LAYER.close(index); layer.msg('已删除'); }
LAYER.loadClose()	LAYER对象下的方法，用于关闭加载层，仅loading私有
LAYER.shift(type , rate)	layer弹出时内置动画，type：动画类型，供四种中选择，左上：'left-top',右上：'right-top',左下：'left-bottom',右下：'right-bottom' 。 rate:动画频率，毫秒	如： success : function(){ LAYER.shift('right-bottom' , 400); }
LAYER.loadClose()	LAYER对象下的方法，用于关闭加载层，仅loading私有
LAYER.autoArea(index)	用来处理在层中宽高改变时，重新自适应层宽高。	如： success : function(){ $('#test').click(function(){ $(this).append('</div>新增的元素</div>'); var index = LAYER.getIndex(this); LAYER.autoArea(index); }); }

下面是一些示例：

自己写的一段可用的代码：

$("#btnId").click(function(){//btnId为触发弹出层的按钮ID
　　$.layer({
　　　　type : 1,
　　　　title : ['新增图片内容' , true],
　　　　offset : ['30px' , '50%'],
　　　　area : ['855px','350px'],
　　　　page : {dom : '#tt'},
　　　　success : function(layer){
　　　　　　//加载层成功，绑定确定和关闭按钮
　　　　　　$('#div2Sure').unbind('click').bind('click',function(){
　　　　　　　　var index = LAYER.getIndex(this);
　　　　　　　　LAYER.close(index);
　　　　　　});
　　　　　　$('#div2Close').unbind('click').bind('click',function(){
　　　　　　　　var index = LAYER.getIndex(this);
　　　　　　　　LAYER.close(index);
　　　　　　});
　　　　}
　　});
});

官网上的示例：

//信息框一
$.layer({
    area : ['auto','auto'],
    dialog : {msg:'白菜级别前端攻城师贤心',type : 8}	
});
//信息框二
$.layer({
    shade : ['',false],
    area : ['auto','auto'],
    title : ['',false],
    dialog : {msg:'前端攻城师贤心'}	
});
//询问框
$.layer({
    shade : ['',false],
    area : ['auto','auto'],
    dialog : {
        msg:'您是如何看待前端开发？',
        btns : 2, 
        type : 4,
        btn : ['重要','奇葩'],
        yes : function(){
            layer.msg('您选择了重要。',2,1);
        },
        no : function(){
            layer.msg('奇葩!!!',2,4);
        }
    }
});
//页面层一
$.layer({
    shade : ['',false],
    type : 1,
    area : ['auto','auto'],
    offset : ['300px',''],
    border : [10 , 0.5 , '#628C1C', true],
    page : {dom : '.layer_notice'},
    close : function(index){
        LAYER.close(index);
        $('.layer_notice').show();	
    }
});
//页面层二
$.layer({
    type : 1,
    title : ['',false],
    fix : false,
    offset:['50px' , ''],
    area : ['auto','auto'],
    shadeClose : true,
    page : {dom : '#tong'}
});
$('#tong').live('click',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
//iframe层
$.layer({
    type : 2,
    closeBtn : [0,false],
    time : 5,
    iframe : {
        src : 'http://player.youku.com/player.php/sid/XMjY3MzgzODg0/v.swf'
    },
    title : ['' , false],
    area : ['500px','300px'],
    success : function(){ //层加载成功后进行的回调
        LAYER.shift('right-bottom',1000); //浏览器右下角弹出
    },
    end : function(){ //层彻底关闭后执行的回调
        $.layer({
            type : 2,
            offset : ['100px' , ''],
            iframe : {
                src : 'http://xu.sentsin.com/about/'
            },	
            area : ['960px','500px']
        })
    }
});
//加载层
$.layer({
    type : 3,
    time : 2
});
//小tips层
$('.class').click(function(){
	layer.tips('我爱你，你爱我吗？' , this , 3);
});

信息框一：
layer.alert('一个很普通的信息框');
信息框二：
$.layer({
    area : ['auto','auto'],
    title : ['',false],
    dialog:{msg:'信息框演示二'}
});
信息框三：
layer.confirm('信息框演示三',function(index){
    LAYER.close(index);
    layer.msg('信息框演示三');
});
信息框四：
$.layer({
    fix : false,
    move : ['',false],
    shade : ['' , '' , false],
    area : ['auto','auto'],
    dialog:{msg:'这是一个既不能固定，又不能拖拽的层'}
});
信息框之变脸：
var i = 0;
$.layer({
    dialog:{type:0,msg:'<a href="javascript:;" id="setface">点击我，试试变脸</a>'},
    success : function(layer){
        $('#setface').unbind('click').bind('click',function(){
            var index = LAYER.getIndex(this);
            i++;
            layer.find('.xubox_msgico').removeClass('xubox_msgtype'+(i-1)).addClass('xubox_msgtype'+i);
            i > 10 && LAYER.close(index);
        });
    },
    end : function(){
        i = 0;
    }
});
信息框六：
layer.msg('2秒后自动关闭');

一：页面层之仿百度登录：
$.layer({
    type : 1,
    title : ['',false],
    closeBtn : ['',false],
    border : ['','','',false],
    area : ['455px','371px'],
    page : {dom : '#baidu'}
});
$('#baidu').live('click',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
二、页面层之图片：
$.layer({
    type : 1,
    title : ['',false],
    fix : false,
    offset:['50px' , ''],
    area : ['515px','615px'],
    page : {dom : '#tong'}
});
$('#tong').live('click',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
三、页面层之淘宝：
$.layer({
    type : 1,
    title : ['',false],
    offset:['150px' , ''],
    border : ['','','',false],
    area : ['503px','395px'],
    page : {dom : '#taobao'}
});
$('#taobao').live('click',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});

一：iframe层之从左下角弹出
$.layer({
    type : 2,
    title : ['',false],
    iframe : {src : 'http://pic10.nipic.com/20101023/145234_134017065776_2.gif'},
    area : ['350px' , '466px'],
    success : function(){
        LAYER.shift('left-bottom',400);	
    }
});
二：iframe层之正中央
$.layer({
    type : 2,
    title : ['天之痕三个人的时光-半抱琵琶版',true],
    iframe : {src : 'http://www.tudou.com/v/Rvy0IbYmBrQ/&resourceId=0_04_05_99/v.swf'},
    area : ['750px' , '466px'],
    offset : ['100px','']
});
三：iframe层之子父操作
$.layer({
    type : 2,
    title : ['iframe子父操作测试',true],
    iframe : {src : 'iframe.html'},
    area : ['200px' , '206px'],
    offset : ['150px',''],
    close : function(index){
        alert('您得到了子窗口的所有文本：' + LAYER.getChildFrame('body').text());
        LAYER.close(index);
    }
}); 
子窗口操作父窗口：
$('#a').click(function(){
	var index = parent.LAYER.getFrameIndex();
	parent.LAYER.close(index);	
}); 

加载层一：
$.layer({
    type : 3,
    time : 2
}); 或：layer.load(3,2);
加载层二：					
$.layer({
    type : 3,
    time : 2,
    shade : ['','','',false],
    border : [0,'','','',false],
    loading : {type : 3}
});

一：tips小提示层
layer.tips('嗨，朋友，更多效果你自己慢慢发现吧。',this);
二：渐显弹出layer
$.layer({
    area : ['','auto'],
    fadeIn : [500,true],
    dialog : {msg : '嗨，朋友，更多效果你自己慢慢发现吧。'}
});