layui弹出层

程序员文章站 2022-05-06 09:40:57

...

弹出层【重点】

layer.alert

layui弹出层

layer.confirm

layui弹出层

layer.prompt

layui弹出层

layer.tab

layui弹出层

layer.photos(options)

layui弹出层

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"

}

]

}

layui弹出层

layer.msg

layui弹出层

layer.tips

layui弹出层

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);

});

layer.type=1

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

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

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

layui弹出层

layer.type=2

type=2时是一个ifream层

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

layui弹出层

<%--
  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" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>layer弹出层</title>
    <link rel="stylesheet" href="./libs/layui/css/layui.css">
    <link rel="stylesheet" href="./libs/css/global.css">
    <script type="text/javascript" src="./libs/layui/layui.js"></script>
    <style type="text/css">
        .layer-photos-demo{margin:10px 0;}
        .layer-photos-demo img{width: 160px; height: 100px;}
    </style>
</head>
<body>

    <button type="button" id="btn1" class="layui-btn">alert</button>
    <button type="button" id="btn2" class="layui-btn">confirm</button>
    <button type="button" id="btn3" class="layui-btn">prompt</button>
    <button type="button" id="btn4" class="layui-btn">tab</button>
    <button type="button" id="btn5" class="layui-btn">photos</button>
    <button type="button" id="btn6" class="layui-btn">layer.msg</button>
    <button type="button" id="btn7" class="layui-btn">layer.tips</button>
    <%--//HTML示例--%>
    <div id="layer-photos-demo" class="layer-photos-demo">
        <img layer-pid="图片id，可以不写" layer-src="./libs/images/1.jpg" src="./libs/images/1.jpg" alt="图片1">
        <img layer-pid="图片id，可以不写" layer-src="./libs/images/2.jpg" src="./libs/images/2.jpg" alt="图片2">
        <img layer-pid="图片id，可以不写" layer-src="./libs/images/3.jpg" src="./libs/images/3.jpg" alt="图片3">
        <img layer-pid="图片id，可以不写" layer-src="./libs/images/4.jpg" src="./libs/images/4.jpg" alt="图片4">
        <img layer-pid="图片id，可以不写" layer-src="./libs/images/5.jpg" src="./libs/images/5.jpg" alt="图片5">
    </div>
    <script>
        layui.use(['element','jquery','colorpicker','layer'], function() {
                var $ = layui.jquery;
                var element = layui.element;
                var colorpicker = layui.colorpicker;
                var layer = layui.layer;
                
                
                $("#btn1").click(function () {
                    layui.code
//eg1
                    layer.alert('只想简单的提示');
//eg2
                    layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。图标：1-7
//eg3
                    layer.alert('有了回调', function(index){
                        //do something

                        layer.close(index);
                    });
                });

                $("#btn2").click(function () {
                    //eg1
                    layer.confirm('你真的要删除吗?', {icon: 3, title:'提示'}, function(index){
                        //do something

                        layer.close(index);
                    });


                    //eg2
                    layer.confirm('你真的要删除吗?', function(index){
                        //do something

                        layer.close(index);
                    });
                });


                $("#btn3").click(function () {
                    //例子1
                    layer.prompt(function(value, index, elem){
                        alert(value); //得到value
                        layer.close(index);
                    });

                    //例子2
                    layer.prompt({
                        formType: 2,
                        value: '初始值',
                        title: '请输入值',
                        area: ['800px', '350px'] //自定义文本域宽高
                    }, function(value, index, elem){
                        alert(value); //得到value
                        layer.close(index);
                    });
                });


                $("#btn4").click(function () {
                    layer.tab({
                        area: ['600px', '300px'],
                        tab: [{
                            title: 'TAB1',
                            content: '内容1'
                        }, {
                            title: 'TAB2',
                            content: '内容2'
                        }, {
                            title: 'TAB3',
                            content: '内容3'
                        }]
                    });
                });


                $("#btn5").click(function () {
                    $.get("libs/images.json",function (json) {
                        layer.photos({
                             photos: json
                            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）

                        });
                    })

                });




                $("#btn6").click(function () {
                    //eg1
                    layer.msg('只想弱弱提示');
//eg2
                    layer.msg('有表情地提示', {icon: 6});
//eg3
                    layer.msg('关闭后想做些什么', function(){
                        //do something
                    });
//eg
                    layer.msg('同上', {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                    });
                });

                $("#btn7").click(function () {
                    //eg1
                    layer.tips('只想提示地精准些', '#id');
//eg 2
                    $('#id').on('click', function(){
                        var that = this;
                        layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
                    });
//eg 3
                    layer.tips('在上面', '#id', {
                        tips: 1
                    });
                });
            });
    </script>

</body>
</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" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>layer弹出层</title>
    <link rel="stylesheet" href="./libs/layui/css/layui.css">
    <link rel="stylesheet" href="./libs/css/global.css">
    <script type="text/javascript" src="./libs/layui/layui.js"></script>
    <style type="text/css">
        .layer-photos-demo{margin:10px 0;}
        .layer-photos-demo img{width: 160px; height: 100px;}
    </style>
</head>
<body>
    <button type="button" id="btn1" class="layui-btn">layer.open.type=0</button>
    <button type="button" id="btn2" class="layui-btn">layer.open.type=1</button>
    <button type="button" id="btn3" class="layui-btn">layer.open.type=2</button>
    <button type="button" id="btn4" class="layui-btn">tab</button>

    <div id="mydiv" style="display: none;padding: 20px;">
        <form class="layui-form" action="" lay-filter="dataFrm">
            <div class="layui-inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="用户名" class="layui-input">
                    </div>
                </div>
            </div>
            <br>

            <div class="layui-inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="required|password" autocomplete="off" placeholder="用户密码" class="layui-input">
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" id="phone" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <br>
                <div class="layui-inline">
                    <label class="layui-form-label">验证邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" id="email" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">籍贯</label>
                    <div class="layui-input-inline">
                        <select name="jiguan" id="jiguan" lay-filter="jiguan">
                            <option value=""></option>
                            <option value="广东">广东</option>
                            <option value="广西" selected="">广西</option>
                            <option value="山东">山东</option>
                            <option value="山西">山西</option>
                            <option value="北京">北京</option>
                        </select>
                    </div>
                </div>
            </div>




            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="sex" name="sex" value="男" title="男" checked="">
                    <input type="radio" lay-filter="sex" name="sex" value="女" title="女">
                    <input type="radio" lay-filter="sex" name="sex" value="禁" title="禁用" disabled="">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox"  lay-filter="hobby" name="hobby" value="写作" title="写作">
                    <input type="checkbox" lay-filter="hobby" name="hobby" value="阅读" title="阅读">
                    <input type="checkbox" lay-filter="hobby" name="hobby" value="发呆" title="发呆">
                </div>
            </div>






            <div class="layui-form-item">
                <label class="layui-form-label">是否在职</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="isHere" lay-filter="isHere" checked="checked" lay-skin="switch" lay-text="是|否">
                </div>
            </div>





            <%--<div class="layui-form-item">--%>
                <%--<div class="layui-input-block">--%>
                    <%--<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>--%>
                    <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
                    <%--<button type="button" id="btn1" class="layui-btn">向select里面添加一个深圳</button>--%>
                    <%--<button type="button" id="btn2" class="layui-btn">初始化表单</button>--%>
                <%--</div>--%>
            <%--</div>--%>


        </form>
    </div>

    <script>
        layui.use(['element','jquery','colorpicker','layer','form'], function() {
            var $ = layui.jquery;
            var element = layui.element;
            var colorpicker = layui.colorpicker;
            var layer = layui.layer;
            var form=layui.form;

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

                })
            });

            $("#btn2").click(function () {
                layer.open({
                    type:1,   //设置类型 默认为0 1页面层  2 ifream层
                    title:'提示',//标题
                    content:$('#mydiv'),//内容
                    skin:'layui-layer-molv', //皮肤
                    // area:'110px'
                    area:['500px','300px']  ,//宽高
                    offset:'auto',
                    icon:1 ,  //只对type=0的时候有效
                    btn:['按钮一','按钮二','按钮三'],
                    yes: function(index, layero){
                        //按钮【按钮一】的回调
                        alert("按钮一");
                        layer.close(index);
                    }
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        alert("按钮二");
                        layer.close(index);
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    ,btn3: function(index, layero){
                        //按钮【按钮三】的回调
                        alert("按钮三");
                        layer.close(index);
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    ,cancel: function(){
                        //右上角关闭回调
                        layer.alert('cancel');
                        //return false //开启该代码可禁止点击该按钮关闭
                    },
                    btnAlign:'c'  , //按钮的对齐方式
                    closeBtn:2,     //设置关闭按钮的样式 1 默认 2悬浮
                    // shade:true
                    shade:[0.8,'#FF0000'],
                    shadeClose:true ,  //点击遮罩是否关闭弹层
                    anim:4  , //设置动画
                    maxmin:true,  //是否显示最大最小化的按钮type=1 或者type=2的时候有效
                    success:function (layero,index) {
                        alert(index);
                    }

                })
            });


            $("#btn3").click(function () {
                layer.open({
                    type:2,   //设置类型 默认为0 1页面层  2 ifream层
                    title:'提示',//标题
                    content:"form.jsp",//内容
                    skin:'layui-layer-molv', //皮肤

                    // area:'110px'
                    area:['500px','300px']  ,//宽高
                    offset:'auto',
                    icon:1 ,  //只对type=0的时候有效
                    btn:['按钮一','按钮二','按钮三'],
                    yes: function(index, layero){
                        //按钮【按钮一】的回调
                        alert("按钮一");
                        layer.close(index);
                    }
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        alert("按钮二");
                        layer.close(index);
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    ,btn3: function(index, layero){
                        //按钮【按钮三】的回调
                        alert("按钮三");
                        layer.close(index);
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    ,cancel: function(){
                        //右上角关闭回调
                        layer.alert('cancel');
                        //return false //开启该代码可禁止点击该按钮关闭
                    },
                    btnAlign:'c'  , //按钮的对齐方式
                    closeBtn:2,     //设置关闭按钮的样式 1 默认 2悬浮
                    // shade:true
                    shade:[0.8,'#FF0000'],
                    shadeClose:true ,  //点击遮罩是否关闭弹层
                    anim:4  , //设置动画
                    maxmin:true,  //是否显示最大最小化的按钮type=1 或者type=2的时候有效
                    success:function (layero,index) {
                        alert(index);
                    }

                })
            });


            $("#btn4").click(function () {

            });
        });
    </script>
</body>
</html>

上一篇： c-学生成绩管理系统

下一篇：超级简单实用的登录验证码 kaptcha 教程

layui弹出层

弹出层【重点】

layer.alert

layer.confirm

layer.prompt

layer.tab

layer.photos(options)

layer.msg

layer.tips

layer.type=0

layer.type=1

layer.type=2

android弹出activity设置大小的方法

解决ios模拟器不能弹出键盘问题的方法

非常实用的php弹出错误警告函数扩展性强

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

layui 表格操作列按钮动态显示的实现方法

layui加载表格,绑定新增,编辑删除,查看按钮事件的例子

layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子

layer的prompt弹出框,点击回车,触发确定事件的方法

layui在form表单页面通过Validform加入简单验证的方法

layui的表单验证支持ajax判断用户名是否重复的实例