layer插件學習——彈框（自定義頁）

本文是自己整理的關於layer插件的彈框樣式結果

介紹：

　　官方介紹：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

 

一：彈出到另外一個頁面的寫法，及其關閉，添加保存之后關閉頁面的寫法

　　運用：點擊添加按鈕，彈出另外一個頁面

$("#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);
 }) 

　　

 更多彈出實例：http://layer.layui.com/test/more.html

圖片.png

普通示例：http://layer.layui.com/