layer弹出层示例

layer弹出层示例效果图如下:代码如下:<linkrel=”stylesheet”href=”../static/thirdparty/layui-v2.4.5/css/layui.css”media=”all”><scriptsrc=”../static/thirdparty/layui-v2.4.5/layui.all.js”charset=”utf-8″>&…

效果图如下:

layer弹出层示例

代码如下:

<link rel="stylesheet" href="../static/thirdparty/layui-v2.4.5/css/layui.css"  media="all">
<script src="../static/thirdparty/layui-v2.4.5/layui.all.js" charset="utf-8"></script>

    <style>
        .a{
            text-align: right;
            font-weight: bold
        }
    </style>
<script>
    layui.use(["layer"], function(){
        var layer = layui.layer;
        // var loading = layer.load(1);
        var content = '<div class="layui-row">\n' +
            '        <div class="layui-col-md4 a">\n' +
            '            申请矿区名称:\n' +
            '        </div>\n' +
            '        <div class="layui-col-md8">\n' +
            '            矿泉水矿\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-row">\n' +
            '        <div class="layui-col-md4 a">\n' +
            '            矿权类型:\n' +
            '        </div>\n' +
            '        <div class="layui-col-md8">\n' +
            '            勘探\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-row">\n' +
            '        <div class="layui-col-md4 a">\n' +
            '            矿种:\n' +
            '        </div>\n' +
            '        <div class="layui-col-md8">\n' +
            '            地热\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-row">\n' +
            '        <div class="layui-col-md4 a">\n' +
            '            申请矿权坐标:\n' +
            '        </div>\n' +
            '        <div class="layui-col-md8">\n' +
            '            ***\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="layui-row">\n' +
            '        <div class="layui-col-md4 a">\n' +
            '            分析结果:\n' +
            '        </div>\n' +
            '        <div class="layui-col-md8">\n' +
            '            该申请矿权位于xxxx勘探规划区块内,符合规划要求。\n' +
            '        </div>\n' +
            '    </div>';

        layer.open({
            type: 0
            ,title: '分析结果'
            ,content: content
            ,btnAlign: 'c'  // 按钮居中对齐
            ,shade: 0 //不显示遮罩
            ,btn: ['分析报告下载']
            ,yes: function(index, layero){
                layer.close(index);
                console.log("下载成功")
            }
        });

    });


</script>

参考文章

layer弹出层(官网):https://www.layui.com/doc/modules/layer.html

今天的文章layer弹出层示例分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30910.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注