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

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

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

在貼出代碼

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

這是一個最簡單的彈出層,可根據icon配置左邊的圖標

通常情況下,除了彈窗之外我們一般都會有對按鈕做回調處理的一些操作

如圖:

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

看下效果圖1.

code:

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

回調的例子:

code:

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

open方式

code

layer.open({
  type: 1
  ,title: "open方式彈出層" //不顯示標題欄  title : false/標題
  ,closeBtn: true
  ,area: '300px;'
  ,shade: 0.8
  ,id: 'LAY_layuipro' //設定一個id，防止重復彈出
  ,resize: false
  ,btn: ['火速圍觀', '殘忍拒絕']
  ,btnAlign: 'c'
  ,moveType: 1 //拖拽模式，0或者1
  ,content: '<div >內容<br>內容</div>'
  ,success: function(layero){
     var btn = layero.find('.layui-layer-btn');
      btn.find('.layui-layer-btn0').attr({
         href: 'http://www.layui.com/'
      ,target: '_blank'
    });
  }
});

以上是“layer彈出層框架alert與msg的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！