layer彈窗插件操作的示例分析

要彈窗顯示的內(nèi)容

手機(jī)彈窗效果

//彈窗后兩秒自動(dòng)關(guān)閉
layer.open({ 
content: '通過style設(shè)置你想要的樣式', 
style: 'background-color:#09C1FF; color:#fff; border:none;', 
time: 2 
});
//彈窗后點(diǎn)擊關(guān)閉
layer.open({ 
  btn: ['關(guān)閉'], 
  content:'內(nèi)容' 
})

更多彈效果

特別說明：事件需自己綁定，以下只展現(xiàn)調(diào)用代碼。

//初體驗(yàn)
layer.alert('內(nèi)容')
//第三方擴(kuò)展皮膚
layer.alert('內(nèi)容', {
 icon: 1,
 skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴(kuò)展。關(guān)于皮膚的擴(kuò)展規(guī)則，去這里查閱
})
//詢問框
layer.confirm('您是如何看待前端開發(fā)？', {
 btn: ['重要','奇葩'] //按鈕
}, function(){
 layer.msg('的確很重要', {icon: 1});
}, function(){
 layer.msg('也可以這樣', {
  time: 20000, //20s后自動(dòng)關(guān)閉
  btn: ['明白了', '知道了']
 });
});
//提示層
layer.msg('玩命提示中');
//墨綠深藍(lán)風(fēng)
layer.alert('墨綠風(fēng)格，點(diǎn)擊確認(rèn)看深藍(lán)', {
 skin: 'layui-layer-molv' //樣式類名
 ,closeBtn: 0
}, function(){
 layer.alert('偶吧深藍(lán)style', {
  skin: 'layui-layer-lan'
  ,closeBtn: 0
  ,shift: 4 //動(dòng)畫類型
 });
});
//捕獲頁(yè)
layer.open({
 type: 1,
 shade: false,
 title: false, //不顯示標(biāo)題
 content: $('.layer_notice'), //捕獲的元素
 cancel: function(index){
  layer.close(index);
  this.content.show();
  layer.msg('捕獲就是從頁(yè)面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', {time: 5000, icon:6});
 }
});
//頁(yè)面層
layer.open({
 type: 1,
 skin: 'layui-layer-rim', //加上邊框
 area: ['420px', '240px'], //寬高
 content: 'html內(nèi)容'
});
//自定頁(yè)
layer.open({
 type: 1,
 skin: 'layui-layer-demo', //樣式類名
 closeBtn: 0, //不顯示關(guān)閉按鈕
 shift: 2,
 shadeClose: true, //開啟遮罩關(guān)閉
 content: '內(nèi)容'
});
//tips層
layer.tips('Hi，我是tips', '吸附元素選擇器，如#id');
//iframe層
layer.open({
 type: 2,
 title: 'layer mobile頁(yè)',
 shadeClose: true,
 shade: 0.8,
 area: ['380px', '90%'],
 content: 'http://layer.layui.com/mobile/' //iframe的url
}); 
//iframe窗
layer.open({
 type: 2,
 title: false,
 closeBtn: 0, //不顯示關(guān)閉按鈕
 shade: [0],
 area: ['340px', '215px'],
 offset: 'rb', //右下角彈出
 time: 2000, //2秒后自動(dòng)關(guān)閉
 shift: 2,
 content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動(dòng)條
 end: function(){ //此處用于演示
  layer.open({
   type: 2,
   title: '很多時(shí)候，我們想最大化看，比如像這個(gè)頁(yè)面。',
   shadeClose: true,
   shade: false,
   maxmin: true, //開啟最大化最小化按鈕
   area: ['893px', '600px'],
   content: 'http://fly.layui.com/'
  });
 }
});
//加載層
var index = layer.load(0, {shade: false}); //0代表加載的風(fēng)格，支持0-2
//loading層
var index = layer.load(1, {
 shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一個(gè)tips，只不過我長(zhǎng)得跟之前那位稍有些不一樣。', '吸附元素選擇器', {
 tips: [1, '#3595CC'],
 time: 4000
});
//prompt層
layer.prompt({
 title: '輸入任何口令，并確認(rèn)',
 formType: 1 //prompt風(fēng)格，支持0-2
}, function(pass){
 layer.prompt({title: '隨便寫點(diǎn)啥，并確認(rèn)', formType: 2}, function(text){
  layer.msg('演示完畢！您的口令：'+ pass +' 您最后寫下了：'+ text);
 });
});
//tab層
layer.tab({
 area: ['600px', '300px'],
 tab: [{
  title: 'TAB1', 
  content: '內(nèi)容1'
 }, {
  title: 'TAB2', 
  content: '內(nèi)容2'
 }, {
  title: 'TAB3', 
  content: '內(nèi)容3'
 }]
});
//相冊(cè)層
$.getJSON('test/photos.json?v='+new Date, function(json){
 layer.photos({
  photos: json //格式見API文檔手冊(cè)頁(yè)
  ,shift: 5 //0-6的選擇，指定彈出圖片動(dòng)畫類型，默認(rèn)隨機(jī)
 });
});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayer彈窗插件操作的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!