一個讓你想到即可做到的web彈窗/層----Layer

Layer  

 

layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕松地擁有豐富友好的操作體驗。

在與同類組件的比較中，layer總是能輕易獲勝。她盡可能地在以更少的代碼展現更強健的功能，且格外注重性能的提升、易用和實用性！

如果，你初識layer，你對她不知所措，你甚至不知如何綁定事件… 那或許你應該用秒做單位，快速認識她吧~~                                                                                                       

 

 

 

1

初識 Layer

 

獲得 layer 文件包后，解壓並將 layer 整個文件夾（不要拆分結構） 存放到你項目的任意目錄，使用時，只需引入 layer.js 與 Jquery即可。 

 

 

// 引入好layer.js后，直接用即可
<script src="js/jquery-3.1.1.js"></script>
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

 

2

看幾個信息框實例

 

① 簡單彈出一個提示層

 $('#test1').on('click', function(){
    layer.msg('hello');
  });

 

② 信息框-1

layer.alert('見到你真的很高興', {icon: 6});

③ 信息框-2

layer.msg('你確定你很帥么？', {
  time: 0 //不自動關閉
  ,btn: ['必須啊', '丑到爆']
  ,yes: function(index){
    layer.close(index);
    layer.msg('雅蠛蝶 O.o', {
      icon: 6
      ,btn: ['嗷','嗷','嗷']
    });
  }
});

④ 頁面層-自定義

layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  shadeClose: true,
  skin: 'yourclass',
  content: '自定義HTML內容'
});

 

⑤ iframe層

layer.open({
  type: 2,
  title: false,
  area: ['630px', '360px'],
  shade: 0.8,
  closeBtn: 0,
  shadeClose: true,
  content: '//player.youku.com/embed/XMjY3MzgzODg0'
});

 

 

3

加載層

 

 

① 加載層-默認風格

 

layer.load();

 

② 旋轉樣式

layer.load(1);

 

③ 帶文字的

layer.msg('加載中', {
  icon: 16
  ,shade: 0.01
});

 

 

4

Layer mobile

 

layer mobile是為移動設備（手機、平板等webkit內核瀏覽器/webview）量身定做的彈層UI。

 

采用原生 JavaScript編寫，所有並不依賴任何第三方庫。layer mobile完全獨立於PC版的layer。

 

OK！看幾個實例~

 

① 一個在底部彈出的完整對話框：

 

layer.open({
  title: [
    '我是標題',
    'background-color:#8DCE16; color:#fff;'
  ]
  ,anim: 'up'
  ,content: '展現的是全部結構'
  ,btn: ['確認', '取消']
});

 

② 可以設置多長時間自動關閉：

 

layer.open({
  content: '通過style設置你想要的樣式'
  ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定風格
  ,time: 3
});

 

 

 ③ 自定義一個全屏的頁面層：

var pageii = layer.open({
  type: 1
  ,content: html //新頁面
  ,anim: 'up'
  ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});

 

 ④ 底部對話框

 layer.open({
    content: '這是一個底部彈出的詢問提示'
    ,btn: ['刪除', '取消']
    ,skin: 'footer'
    ,yes: function(index){
      layer.open({content: '執行刪除操作'})
    }
  });

 

 

 

 

layer 采用 MIT 開源許可證，他們是免費使用的。PC端彈窗解決用Lyaer是個不錯的選擇，大家可以去下載一個感受一下~~