layer弹出层

layer下载链接地址：

https://layer.layui.com/?tdsourcetag=s_pctim_aiomsg

使用方法：

需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。

layer：

//最普通，大众方法：

layer中type=2，即弹出iframe层实例
参考文档：
https://blog.csdn.net/Fmuma/article/details/78847934

layer.open({
    type:2,
    title:"供应商选择",
    content:"${pageContext.request.contextPath}/add_material_supplier.jsp",
    //此处为iframe内容页面的地址
    area:"auto",
    btn:["提交"],
    maxmin:true,
    yes:function (index,layero) {
        // console.log("index="+index);
        // console.log("layero="+layero);
        //在dom元素中寻找iframe
        //其中的id为弹出的页面中所需要的对应的标签的id
        var material = $("#material", layero.find("iframe")[0].contentWindow.document);
        console.log(material.val());
        var materialOffer = $("#materialSelect", layero.find("iframe")[0].contentWindow.document);
        //整理，加入逗号
        console.log(materialOffer.val().join(","));
        //点击后自动关闭按钮
         layer.close(index);
    }
})

使用iframe弹出的页面内容

<%--
  Created by IntelliJ IDEA.
  User: zhuzhu
  Date: 2018/9/16
  Time: 20:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    


    

    

若想弹出一个iframe也可以用默认的type=0或1

layer.open({
        type:1或0,
        title:"供应商选择",
        //此处content中为一个html标签
        content:"'",
        area:"auto",
        btn:["提交"],
        yes:function () {
        //通过iframe寻找其子页面中的元素
            var material=$("#iframe").contents().find("#material").val();
            var materialOffer=$("#iframe").contents().find("#materialSelect").val();
            console.log(material);
            console.log(materialOffer.join(","));
            //点击后自动关闭弹窗
             layer.close(index);
        }
    })

iframe中的页面内容

<%--
  Created by IntelliJ IDEA.
  User: zhuzhu
  Date: 2018/9/16
  Time: 20:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    


    

    

layer 弹出一个文档节点（这个是个人觉得最好的，也不用页面间传值，类似于模态弹窗）

<%--
  Created by IntelliJ IDEA.
  User: sunshine
  Date: 2018-09-20
  Time: 20:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    
    
    
    
    
    
    



    首页
    >消息通知管理
    >消息类别管理
    
        
    


    

        

        

            

            
序号
            
类别名称
            
类别描述
            
操作
        
        
    

<%--增加消息弹窗--%>

    

        
*类别名称：
        

            
        
    
    

        
*类别描述：
        

            
        
    
    

        取消