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