先去官網(wǎng)下載最新的js http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js
觸發(fā)彈層的事件可自由綁定，如：
$('#id').on('click', function(){ layer.msg('test'); }); 下面主要貼出上述例子的調(diào)用代碼：
【信息框】：
layer.alert('白菜級別前端攻城師賢心', 8); //風(fēng)格一 layer.msg('前端攻城師賢心'); //風(fēng)格二 //當(dāng)然，遠(yuǎn)遠(yuǎn)不止這兩種風(fēng)格。 【詢問框】：
$.layer({ shade: [0], area: ['auto','auto'], dialog: { msg: '您是如何看待前端開發(fā)？', btns: 2, type: 4, btn: ['重要','奇葩'], yes: function(){ layer.msg('重要', 1, 1); }, no: function(){ layer.msg('奇葩', 1, 13); } } }); //還可用layer.confirm()快捷調(diào)用 【頁面層一】
$.layer({ type: 1, shade: [0], area: ['auto', 'auto'], title: false, border: [0], page: {dom : '.layer_notice'} }); 【頁面層二】
var pageii = $.layer({ type: 1, title: false, area: ['auto', 'auto'], border: [0], //去掉默認(rèn)邊框 shade: [0], //去掉遮罩 closeBtn: [0, false], //去掉默認(rèn)關(guān)閉按鈕 shift: 'left', //從左動畫彈出 page: { html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我從左邊來，我自定了風(fēng) 格。</p><button id="pagebtn" class="btns" onclick="">關(guān)閉< /button></div>' } }); //自設(shè)關(guān)閉 $('#pagebtn').on('click', function(){ layer.close(pageii); }); 【iframe層一】
$.layer({ type: 2, shadeClose: true, title: false, closeBtn: [0, false], shade: [0.8, '#000'], border: [0], offset: ['20px',''], area: ['1000px', ($(window).height() - 50) +'px'], iframe: {src: 'http://f2e.sentsin.com/chat'} }); 【iframe層二】
layer.tips('5秒后右下角窗口自動關(guān)閉，并生成一個新的iframe', this, { time: 5, maxWidth: 260 }); $.layer({ type: 2, closeBtn: false, shadeClose: true, shade: [0.1, '#fff'], border: [0], time: 5, iframe: { src: 'test/guodu.html' }, title: false, area: ['300px','250px'], shift: 'right-bottom', end: function(){ $.layer({ type : 2, title: '賢心博客 - sentsin.com', shadeClose: true, maxmin: true, fix : false, area: ['1024px', 500], iframe: { src : 'http://sentsin.com/' } }); } }); 【加載層一】
layer.load(3);
【加載層二】
layer.load('加載帶文字', 3); 【tips層一】
layer.tips('tips的樣式并非是固定的，您可自定義外觀。', this, { style: ['background-color:#78BA32; color:#fff', '#78BA32'], maxWidth:185, time: 3, closeBtn:[0, true] }); 【tips層二】
layer.tips('默認(rèn)沒有關(guān)閉按鈕', this , {guide: 1, time: 2}); 【輸入/文件層】
//普通文本 layer.prompt({title: '您的名字？'}, function(name){ alert(name); }); //密碼文本 layer.prompt({title: '輸入任何口令，并確認(rèn)',type: 1}, function(pass){ alert(pass); }); //文件上傳 layer.prompt({title: '隨便上傳個東東，并確認(rèn)',type: 2}, function(file){ alert(file); }); //多行文本 layer.prompt({title: '隨便寫點(diǎn)啥，并確認(rèn)',type: 3}, function(val){ alert(val); }); 【tab層】
layer.tab({ area: ['1000px', '500px'], data: [ {title: 'Say', content:'Hi，Main'}, {title: '無題', content:'支持html傳入'} ] }); 【相冊層】
//此處為異步請求模式，具體的json格式，請等待文檔更新。或者你直接通過請求看photos.json var conf = {}; $.getJSON('ajax地址', {}, function(json){ conf.photoJSON = json; //保存json，以便下次直接讀取內(nèi)存數(shù)據(jù) layer.photos({ html: '這里傳入自定義的html，也可以不用傳入（這意味著不會輸出右側(cè)區(qū)域）。相冊支持左右方向鍵、Esc關(guān)閉', json: json }); }); 
