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/