api.junfei.iiixo.com/view/admin/demo/layer.html

<!-- Main content -->
<section class="content">
    <div class="row">
        <!-- 消息提示 -->
        <div class="col-12 col-sm-6">
            <div class="card">
                <div class="card-header ui-sortable-handle">
                    <h3 class="card-title">消息提示</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <p>通过调用<code>$.modal.msg()</code>实现。 </p>
                    <button type="button" class="btn btn-primary" onclick="$.modal.msg('Hi，普通！')">普通</button>
                    <button type="button" class="btn btn-success" onclick="$.modal.msgSuccess('Hi，成功！')">成功</button>
                    <button type="button" class="btn btn-warning" onclick="$.modal.msgWarning('Hi，警告！')">警告</button>
                    <button type="button" class="btn btn-danger" onclick="$.modal.msgError('Hi，失败！')">失败</button>
                </div>
            </div>
        </div>
        <!-- 弹出提示 -->
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header ui-sortable-handle">
                    <h3 class="card-title">弹出提示</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body" id="test">
                    <p>通过调用<code>$.modal.alert()</code>实现。 </p>
                    <button type="button" class="btn btn-primary" onclick="$.modal.alert('Hi，普通！')">普通</button>
                    <button type="button" class="btn btn-success" onclick="$.modal.alertSuccess('Hi，成功！')">成功</button>
                    <button type="button" class="btn btn-warning" onclick="$.modal.alertWarning('Hi，警告！')">警告</button>
                    <button type="button" class="btn btn-danger" onclick="$.modal.alertError('Hi，失败！')">失败</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- 确认提示 -->
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header ui-sortable-handle">
                    <h3 class="card-title">确认提示</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <p>通过调用<code>$.modal.confirm()</code>实现。 </p>
                    <button type="button" class="btn btn-primary" id="button-confirm">询问按钮</button>
                </div>
            </div>
        </div>
        <!-- 消息提示并刷新父窗体 -->
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header ui-sortable-handle">
                    <h3 class="card-title">消息提示并刷新父窗体</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="ibox-content">
                        <p>通过调用<code>$.modal.msgReload()</code>实现。 </p>
                        <button type="button" class="btn btn-primary" id="button-msgReload">提示刷新按钮</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- 普通弹出层 -->
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header ui-sortable-handle">
                    <h3 class="card-title">普通弹出层</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <p>通过调用<code>$.modal.open()</code>实现。 </p>
                    <button type="button" class="btn btn-primary" id="button-open-1">默认</button>
                    <button type="button" class="btn btn-success" id="button-open-2">设置宽高</button>
                    <button type="button" class="btn btn-warning" id="button-open-3">回调函数</button>
                    <button type="button" class="btn btn-danger" id="button-open-4">自定义选项</button>
                    <button type="button" class="btn btn-primary" id="button-open-5">全屏弹出</button>
                </div>
            </div>
        </div>
        <!-- 其他内容 -->
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header ui-sortable-handle">
                    <h3 class="card-title">其他内容</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <p>通过调用<code>layer</code>实现。 </p>
                    <button type="button" class="btn btn-primary" id="button-open-6">tab层</button>
                    <button type="button" class="btn btn-primary" id="button-open-7">prompt层</button>
                    <button type="button" class="btn btn-primary" id="button-open-8">捕获页</button>
                    <button type="button" class="btn btn-primary" id="button-open-9">layer遮罩</button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-title">
                <label class="font-noraml">相关参数详细信息</label>
                <div><a href="https://www.kancloud.cn/ruoshuiyx/siyucms/1299055" target="_blank">https://www.kancloud.cn/ruoshuiyx/siyucms/1299055</a>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript">

        $("#button-confirm").click(function () {
            $.modal.confirm("确认要点击确定吗?", function () {
                $.modal.alert("ok");
            });
        })

        $("#button-msgReload").click(function () {
            $.modal.msgReload("保存成功,正在刷新数据请稍后……", 'success');
        })

        $("#button-open-1").click(function () {
            $.modal.open('添加用户', "layerForm");
        })

        $("#button-open-2").click(function () {
            $.modal.open('添加用户', "layerForm", '900', '320');
        })

        $("#button-open-3").click(function () {
            $.modal.open('添加用户', "layerForm", '900', '320', callback);
        })

        $("#button-open-4").click(function () {
            var btn = ['<i class="fa fa-check"></i> 点我回调', '<i class="fa fa-close"></i> 点我关闭'];
            var options = {
                title: '添加用户',
                width: "900",
                height: "320",
                url: "layerForm",
                btn: btn,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        })

        function doSubmit(index, layero) {
            alert("进入了自定义选项提交方法");
        }

        function callback(index, layero) {
            alert("进入了回调函数提交方法");
        }

        $("#button-open-5").click(function () {
            $.modal.openFull('添加用户', "button");
        })

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

        $("#button-open-7").click(function () {
            layer.prompt({title: '输入任何口令，并确认', formType: 1}, function (pass, index) {
                layer.close(index);
                layer.prompt({title: '随便写点啥，并确认', formType: 2}, function (text, index) {
                    layer.close(index);
                    layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
                });
            });
        })

        $("#button-open-8").click(function () {
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                content: $('#test'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 6});
                }
            });
        })

        $("#button-open-9").click(function () {
            layer.load(0, {shade: false}); // 0代表加载的风格，支持0-2
        })

    </script>
</section>
<!-- /.content -->