layui 模态框

引入：需要注意的是jquery.js需要在layui.js上边引入，不然会报错
模态框里的html部分：需要注意的是button按钮要定义type="button",不然模态框会闪退
完整代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<button  type="button" data-method="offset" data-type="auto"  class="btn btn-primary btn-xs confirm">确认发送</button>


<div>
    <div id="model" style="display: none;">
        <div style="margin-top: 20px;text-align: center;" >
            <input type="file" name="invoice_url" value="" style="display: inline-block"/>
        </div>
        <div style="margin-top: 50px;text-align: center">
            <button type="button" data-id="{$vo.order_id}" order-type="{$vo.order_type}"   class="btn btn-primary btn-xs" onclick="statusBtn()">确定</button>
        </div>

    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="./layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('layer', function() { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        var active = {
            offset: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();
                layer.open({
                    type: 1
                    , offset: type
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: $('#model')
                    // ,btn: '关闭全部'
                    , area: ['250px', '200px']//定义宽和高
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        };

    $(".confirm").on('click',function () {
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
    });
    });
</script>

</body>
</html>
猜你喜欢
