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 style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">內容<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' }); }}); 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
