快捷導(dǎo)航

layer彈出層框架alert與msg詳解

更新時(shí)間：2017年03月14日 09:39:43 作者：風(fēng)動(dòng)隨心

本文主要介紹了layer彈出層框架alert與msg的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

layer至今仍作為layui的代表作，她的受眾廣泛并非偶然，而是這五年多的堅(jiān)持，不斷完善和維護(hù)、不斷建設(shè)和提升社區(qū)服務(wù)，使得猿們紛紛自發(fā)傳播，乃至于成為今天的Layui最強(qiáng)勁的源動(dòng)力。目前，layer已成為國(guó)內(nèi)最多人使用的web彈層組件，GitHub自然Stars3000+，官網(wǎng)累計(jì)下載量達(dá)30w+，大概有20萬(wàn)Web平臺(tái)正在使用layer。

在貼出代碼

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

這是一個(gè)最簡(jiǎn)單的彈出層,可根據(jù)icon配置左邊的圖標(biāo)

通常情況下,除了彈窗之外我們一般都會(huì)有對(duì)按鈕做回調(diào)處理的一些操作

如圖:

layer.alert('墨綠風(fēng)格，點(diǎn)擊確認(rèn)看深藍(lán)', {
  skin: 'layui-layer-molv' //樣式類名 自定義樣式
  ,closeBtn: 1  // 是否顯示關(guān)閉按鈕
  ,anim: 1 //動(dòng)畫類型
  ,btn: ['重要','奇葩'] //按鈕
  ,icon: 6  // icon
  ,yes:function(){
    layer.msg('按鈕1')
  }
  ,btn2:function(){
    layer.msg('按鈕2')
  }});

看下效果圖1.

code:

 layer.msg('大部分參數(shù)都是可以公用的<br>合理搭配，展示不一樣的風(fēng)格', {
   time: 2000, //2s后自動(dòng)關(guān)閉
   btn: ['明白了', '知道了', '哦']
 });

回調(diào)的例子:

code:

layer.msg('也可以這樣', {
   btn: ['明白了', '知道了']
   ,yes: function(index, layero){
     layer.msg("按鈕1回調(diào),參數(shù)是:"+index)
   }
  ,btn2: function(index, layero){
     //按鈕【按鈕二】的回調(diào)
     layer.msg("按鈕2回調(diào),參數(shù)是:"+index)
     return false //開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
  }
});

open方式

code

layer.open({
  type: 1
  ,title: "open方式彈出層" //不顯示標(biāo)題欄  title : false/標(biāo)題
  ,closeBtn: true
  ,area: '300px;'
  ,shade: 0.8
  ,id: 'LAY_layuipro' //設(shè)定一個(gè)id，防止重復(fù)彈出
  ,resize: false
  ,btn: ['火速圍觀', '殘忍拒絕']
  ,btnAlign: 'c'
  ,moveType: 1 //拖拽模式，0或者1
  ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">內(nèi)容<br>內(nèi)容</div>'
  ,success: function(layero){
     var btn = layero.find('.layui-layer-btn');
      btn.find('.layui-layer-btn0').attr({
         href: 'http://www.layui.com/'
      ,target: '_blank'
    });
  }
});

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: