layer彈框在實際項目中的一些應用 · web前端

官方介紹：layer至今仍作為layui的代表作，受眾廣泛并非偶然，而是這五年多的堅持，不斷完善和維護、不斷建設和提升社區服務，使得猿們紛紛自發傳播，乃至于成為今天的Layui最強勁的源動力。目前，layer已成為國內最多人使用的web彈層組件，GitHub自然Stars3000+，官網累計下載量達30w+，大概有20萬Web平臺正在使用layer。同時也高居年度最受歡迎的開源項目榜單：2017年度最流行的十大中國開源軟件：https://www.jianshu.com/p/d7a76eee56e6 受到如此追捧也是有原因的，使用起來快速方便容易上手，界面美觀大方不累贅，看上去很舒服，在項目中用到一部分，也記錄下一些常用的功能和屬性項目中常見的一些彈框層，快速使用這個文檔，layui 官方總文檔：http://layer.layui.com/ 此文檔已經不在維護http://layer.layui.com/api.html 新版彈框文檔：http://www.layui.com/doc/modules/layer.html 討論社區：http://fly.layui.com/ 以下代碼在線調試網址：http://www.layui.com/doc/modules/layer.html 一：彈出到另外一個頁面的寫法，及其關閉，添加保存之后關閉頁面的寫法運用：點擊添加按鈕，彈出另外一個頁面圖片.png 圖片.png $("#adduser").on("click", function() { layer.open({ type : 2, title : '添加標簽', area : [ '800px', '470px' ], fix : false, // ? content :'useradd.jsp', end : function() { } }); }); 頁面點擊關閉按鈕和添加后保存按鈕邏輯代碼： //添加后保存 var index = parent.layer.getFrameIndex(window.name); $("#addBtn").on("click", function() { $.ajax({ url : "xxxxxxxxxx", data : { loginName : $("#loginName").val(), username : $("#username").val(), password : $("#password").val(), rePassword:$("#rePassword").val(), xxxxx : $("#xxxxxxxxxxx option:selected").val(), }, type : "post", success : function(data) { } }); }) $('#close').on('click', function() { parent.layer.close(index); }) 二：自定義位置 offset: ['90px', '900px'] 類型：String/Array，默認：'auto' 默認垂直水平居中。當你只想定義top時，你可以offset: '100px'。當您top、left都要定義時，你可以offset: ['100px', '200px']。除此之外，你還可以定義offset: 'rb'，表示右下角。其它的特殊坐標，你可以自己計算賦值。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>layer彈框屬性</title> </head> <body> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="layer.js"></script> <script> layer.msg('請稍后', { icon: 14, //shade: 0.01, offset: ['90px', '900px'] }); </script> </html> 三：自定義彈框大小（寬度和高度） var index= layer.msg('尼瑪，打個醬油', {icon: 4}); layer.style(index, { width: '200px', height:'200px' }); 四：設置layer.msg彈窗時間 msg彈框自帶消失屬性，有的用于注冊成功之后的提示框幾秒后消失，當然如果需要手動設置彈框時間，代碼如下：彈出提示信息，4秒后自動消失 <script> layer.msg('提示信息', {time:4000} ); //1000就是1秒；依次類推； </script> 五：彈框圖標一覽表圖片.png 圖片.png <script> layer.msg('圖標顯示', { icon: 14, //shade: 0.01, }); </script> 六：常見例子：加載層和loading層以及更多彈出實例：圖片.png 圖片.png //加載層 var index = layer.load(0, {shade: false}); //0代表加載的風格，支持0-2 //loading層 var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); 更多彈出實例：http://layer.layui.com/test/more.html 圖片.png 圖片.png 普通示例：http://layer.layui.com/ 圖片.png 圖片.png 歡迎關注！歡迎通過公眾號咨詢專業問題，我會盡力回復！