一個好用的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 : '嗨，朋友，更多效果你自己慢慢發現吧。'}
});