layui弹出层

1. 弹出层【重点】

1. layer.alert

1. layer.confirm

1. layer.prompt

1. layer.tab

1. layer.photos(options)

json要求

{   "title": "相册标题",   "id": 123,   "start": 0,   "data": [       {       "alt": "图片名1",       "pid": 5,       "src": "resources/images/img1.jpg",       "thumb": "resources/images/img1.jpg"     },     {       "alt": "图片名3",       "pid": 1,       "src": "resources/images/img3.jpg",       "thumb": "resources/images/img3.jpg"     },     {       "alt": "图片名4",       "pid": 2,       "src": "resources/images/img4.jpg",       "thumb": "resources/images/img4.jpg"     },     {       "alt": "图片名5",       "pid": 3,       "src": "resources/images/img5.jpg",       "thumb": "resources/images/img5.jpg"     },     {       "alt": "图片名6",       "pid": 4,       "src": "resources/images/img6.jpg",       "thumb": "resources/images/img6.jpg"     }   ] }

1. layer.msg

1. layer.tips

1. layer.type=0

//alert              $("#btn1").click(function() {                   var x=layer.open({                       type:0,  //设置类型 默认为0  1 页面层  2ifream层                       title:"提示",  //标题                       content:'你好吗?',//内容  type=0为内容                       skin :'layui-layer-molv',//皮肤                       /* area: '500px' */                       area:['500px','300px'],//宽高                       offset: 'auto',    //offset默认情况下不用设置。但如果你不想垂直水平居中                       icon:1    //只对type=0的效                       , btn: ['按钮一', '按钮二', '按钮三']                       ,yes: function(index, layero){                           //按钮【按钮一】的回调                           alert("按钮一");                           layer.close(index);                         }                         ,btn2: function(index, layero){                           //按钮【按钮二】的回调                           alert("按钮二")                           //return false 开启该代码可禁止点击该按钮关闭                         }                         ,btn3: function(index, layero){                           //按钮【按钮三】的回调                           alert("按钮三")                           //return false 开启该代码可禁止点击该按钮关闭                         }                         ,cancel: function(){                           //右上角关闭回调                             alert("cancel")                           //return false 开启该代码可禁止点击该按钮关闭                         }                       ,btnAlign :'c'  //按钮的对齐方式                       ,closeBtn : 1  //设置关闭按钮的样式  1  默认                        ,shade: [0.8, '#FF0000']                       ,shadeClose:true  //点击遮罩是否关闭弹层                       ,anim: 4 //设置动画                       ,maxmin :true //是否显示最大化和最小化的按钮 type=1 type=2有效                       ,success:function(layero, index){                           alert(index+"  "+x);                       }                   })                   alert(x);              });

1. layer.type=1

页面层  把页面上的某一段HTML代码放到弹出层里面

此时的content属性可以使用html代码

                          也可以使用页面元素的选择器

1. layer.type=2

type=2时是一个ifream层

此时的content就是一个页面的url

s

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2019/10/3
  Time: 14:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    



    alert
    confirm
    prompt
    tab
    photos
    layer.msg
    layer.tips
    <%--//HTML示例--%>
    

        
        
        
        
        
    
    

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2019/10/3
  Time: 15:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    


    layer.open.type=0
    layer.open.type=1
    layer.open.type=2
    tab

    

        

            

                

                    用户名
                    

                        
                    
                
            
            


            

                

                    用户密码
                    

                        
                    
                
            


            

                

                    验证手机
                    

                        
                    
                
                

                

                    验证邮箱
                    

                        
                    
                
            


            

                

                    籍贯
                    

                        
                            
                            广东
                            广西
                            山东
                            山西
                            北京
                        
                    
                
            




            

                单选框
                

                    
                    
                    
                
            


            

                爱好
                

                    
                    
                    
                
            






            

                是否在职
                

                    
                
            





            <%--
--%>
                <%--
--%>
                    <%--立即提交--%>
                    <%--重置--%>
                    <%--向select里面添加一个深圳--%>
                    <%--初始化表单--%>
                <%--
--%>
            <%--
--%>