layer彈出層框架alert與msg的示例分析

小編給大家分享一下layer彈出層框架alert與msg的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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)畫(huà)類型
  ,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 //開(kāi)啟該代碼可禁止點(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 >內(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'
    });
  }
});

以上是“l(fā)ayer彈出層框架alert與msg的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！