zhaobao
/
layui_back


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>admin风格的弹窗</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=315"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /* 表单标题加虚线 */
        .form-item-title {
            text-align: center;
            position: relative;
        }

        .form-item-title:before {
            content: "";
            position: absolute;
            border-top: 1px dashed #ccc;
            left: 40px;
            right: 40px;
            top: 8px;
            z-index: -1;
        }

        .form-item-title > span {
            background-color: white;
            padding: 0 10px;
            font-size: 13px;
            color: #666;
        }
    </style>
</head>
<body>

<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">常见用法</div>
        <div class="layui-card-body layui-text">
            <div class="layui-btn-container" style="margin-top: 15px;">
                <button id="btnDialog3" class="layui-btn layui-btn-primary">询问弹窗</button>
                <button id="btnDialog4" class="layui-btn layui-btn-primary">输入弹窗</button>
                <button id="btnDialog11" class="layui-btn layui-btn-primary">多行输入弹窗</button>
                <button id="btnDialog1" class="layui-btn layui-btn-primary">基本表单弹窗</button>
                <button id="btnDialog2" class="layui-btn layui-btn-primary">最大最小化</button>
                <button id="btnDialog5" class="layui-btn layui-btn-primary">主题设置</button>
            </div>
            <p style="margin: 5px 0 10px 0;">
                更多弹出层的使用示例请查看 <a href="http://layer.layui.com/" target="_blank">layer弹窗组件</a>
            </p>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">进阶用法</div>
        <div class="layui-card-body layui-text">
            <div class="layui-btn-container" style="margin-top: 15px;">
                <button id="btnDialog8" class="layui-btn">表单底部按钮固定</button>
                <button id="btnDialog9" class="layui-btn">多排并列表单</button>
                <button ew-event="open" data-type="2" data-content="page/tpl/tpl-password.html" data-window="top"
                        data-title="修改密码" data-area="360px,290px" class="layui-btn">无js打开弹窗
                </button>
                <button ew-event="popupRight" data-type="2" data-window="top" data-title="便签"
                        data-success="onDemoDialog1Success" data-content="page/tpl/tpl-note.html" class="layui-btn">
                    无js右侧弹出
                </button>
            </div>
            <p style="margin: 5px 0 10px 0;">无js打开弹窗真的不需要写js，使用起来不要太爽！！！</p>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">内置功能</div>
        <div class="layui-card-body layui-text">
            <p style="margin: 10px 0 20px 0;">以下弹窗都是easyweb内部已经封装好的功能，使用只需调对应的方法即可。</p>
            <div class="layui-btn-container" style="margin-bottom: 10px;">
                <button id="btnDialog6" class="layui-btn layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe715;</i>地图选择位置
                </button>
                <button id="btnDialog7" class="layui-btn layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe60d;</i>裁剪图片
                </button>
                <button id="btnDialog10" class="layui-btn layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe61d;</i>文件选择(多选)
                </button>
                <button id="btnDialog12" class="layui-btn layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe61d;</i>文件选择(单选)
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">数据传递</div>
        <div class="layui-card-body layui-text">
            <p style="margin: 10px 0 20px 0;">admin.open方法封装了弹窗多页面之间的参数传递，使用起来很方便。</p>
            <div class="layui-btn-container" style="margin-bottom: 10px;">
                <button id="btnDialog13" class="layui-btn layui-btn-primary">iframe弹窗传值</button>
                <button id="btnDialog14" class="layui-btn layui-btn-primary">非iframe的独立页面弹窗</button>
            </div>
        </div>
    </div>
</div>

<!-- 固定底部按钮 -->
<script type="text/html" id="modelPtInfo">
    <form id="modelFormPtInfo" lay-filter="modelFormPtInfo" class="layui-form model-form no-padding">
        <input name="ptId" type="hidden"/>
        <div class="model-form-body" style="max-height: 310px;">
            <div class="layui-form-item">
                <label class="layui-form-label">实习公司</label>
                <div class="layui-input-block">
                    <input name="companyName" placeholder="请输入实习公司" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">实习岗位</label>
                <div class="layui-input-block">
                    <input name="jobName" placeholder="请输入实习岗位" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">实习类型</label>
                <div class="layui-input-block">
                    <select name="ptTypeId" lay-verType="tips" lay-verify="required" required>
                        <option value="">请选择</option>
                        <option value="1">顶岗实习</option>
                        <option value="2">跟岗实习</option>
                        <option value="3">毕业实习</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公司地址</label>
                <div class="layui-input-block">
                    <input name="companyAddress" placeholder="请输入公司地址" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公司联系人</label>
                <div class="layui-input-block">
                    <input name="companyContact" placeholder="请输入公司联系人" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">起止日期</label>
                <div class="layui-input-block">
                    <input name="dateRange" placeholder="请选择起止日期" type="text" class="layui-input" autocomplete="off"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="comments" placeholder="请输入备注" class="layui-textarea" maxlength="500"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right model-form-footer">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelSubmitPtInfo" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- 双排表单 -->
<script type="text/html" id="modelSDKAuth">
    <form id="modelFormSDKAuth" lay-filter="modelFormSDKAuth" class="layui-form layui-row model-form">
        <input name="authId" type="hidden"/>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择公司</label>
                    <div class="layui-input-block">
                        <select name="companyId" lay-search="true" lay-verType="tips" lay-verify="required" required>
                            <option value="">请选择公司</option>
                            <option value="1">公司一</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">应用名称</label>
                    <div class="layui-input-block">
                        <input name="appName" placeholder="请输入应用名称" type="text" class="layui-input" maxlength="100"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input name="price" placeholder="请输入价格" type="number" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">应用类型</label>
                    <div class="layui-input-block">
                        <select name="deviceIds" lay-verType="tips" lay-verify="required" required>
                            <option value="1">Android</option>
                            <option value="2">IOS</option>
                            <option value="3">Web</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item form-item-title"><span>Android配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">包名</label>
                    <div class="layui-input-block">
                        <input name="packageName" placeholder="请输入包名" type="text" class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SHA1</label>
                    <div class="layui-input-block">
                        <input name="sha1" placeholder="请输入SHA1" type="text" class="layui-input" lay-verType="tips"/>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item form-item-title"><span>IOS配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Bundle Identifier</label>
                    <div class="layui-input-block">
                        <textarea name="bundle" placeholder="请输入BundleIdentifier" class="layui-textarea"
                                  lay-verType="tips"></textarea>
                    </div>
                </div>
                <div class="layui-form-item form-item-title"><span>Web配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Referer<br/>白名单</label>
                    <div class="layui-input-block">
                        <textarea name="referer" placeholder="请输入Referer白名单，用逗号分隔" class="layui-textarea layui-disabled"
                                  lay-verType="tips" disabled></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelSubmitSDKAuth" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=315"></script>
<script>
    layui.use(['layer', 'admin', 'form', 'laydate', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var form = layui.form;
        var fileChoose = layui.fileChoose;

        // 表单弹窗
        $('#btnDialog1').click(function () {
            parent.layui.admin.open({
                id: 'pswForm',
                type: 2,
                title: '修改密码',
                shade: 0,
                area: ['360px', '287px'],
                content: getProjectUrl() + 'page/tpl/tpl-password.html'
            });
        });

        // 最大化最小化
        $('#btnDialog2').click(function () {
            parent.layui.admin.open({
                type: 2,
                title: '百度一下',
                shade: 0,
                maxmin: true,
                resize: true,
                area: ['640px', '480px'],
                content: 'https://demo.easyweb.vip/iframe/page/console/welcome.html',
                success: function (layero) {
                    $(layero).attr('minleft', '250px');
                }
            });
        });

        // 询问弹窗
        $('#btnDialog3').click(function () {
            parent.layer.confirm('确认删除吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (index) {
                parent.layer.close(index);
            });
        });

        // 输入弹窗
        $('#btnDialog4').click(function () {
            parent.layer.prompt({
                skin: 'layui-layer-admin layui-layer-prompt',
                shade: .1
            }, function (value, index, elem) {
                parent.layer.close(index);
            });
        });

        // 更改主题
        $('#btnDialog5').click(function () {
            $('#btnDialog1').trigger('click');
            parent.layui.admin.popupRight({
                id: 'layer-theme',
                type: 2,
                content: getProjectUrl() + 'page/tpl/tpl-theme.html'
            });
        });

        // 地图选择位置
        $('#btnDialog6').click(function () {
            admin.chooseLocation({
                needCity: true,
                onSelect: function (res) {
                    layer.msg(JSON.stringify(res), {icon: 1});
                }
            });
        });

        // 裁剪图片弹窗
        $('#btnDialog7').click(function () {
            admin.cropImg({
                imgSrc: '../../../assets/images/15367146917869444.jpg',
                onCrop: function (res) {
                    layer.msg('<img src="' + res + '" width="160px" height="160px"/>', {offset: '30px'});
                }
            });
        });

        // 固定底部按钮
        $('#btnDialog8').click(function () {
            admin.open({
                type: 1,
                title: '添加学生实习信息',
                content: $('#modelPtInfo').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 时间范围选择
                    laydate.render({
                        elem: '#modelFormPtInfo input[name="dateRange"]',
                        range: true,
                        trigger: 'click'
                    });
                    form.render('select');
                    // 表单提交事件
                    form.on('submit(modelSubmitPtInfo)', function (data) {
                        layer.msg(JSON.stringify(data.field), {icon: 1});
                        return false;
                    });

                }
            });

        });

        // 双排表单
        $('#btnDialog9').click(function () {
            admin.open({
                type: 1,
                title: '添加授权',
                area: '745px',
                content: $('#modelSDKAuth').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    form.render('select');
                }
            });
        });

        // 文件选择
        $('#btnDialog10').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: '../../../json/files.json',
                num: 3,
                dialog: {
                    offset: '60px'
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });
        });

        // 多行输入
        $('#btnDialog11').click(function () {
            parent.layer.prompt({
                title: '请输入拒绝理由：',
                formType: 2,
                skin: 'layui-layer-admin layui-layer-prompt',
                shade: .1
            }, function (value, index, elem) {
                parent.layer.close(index);
            });
        });

        // 文件选择单选
        $('#btnDialog12').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: '../../../json/files.json',
                num: 1,
                dialog: {
                    offset: '60px'
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });
        });

        // 无js打开弹窗成功的回调
        window.onDemoDialog1Success = function () {
            top.layer.msg('弹窗被成功打开了', {icon: 1});
        };

        // iframe形式弹窗传值
        $('#btnDialog13').click(function () {
            admin.open({
                type: 2,
                title: 'iframe弹窗传值',
                content: 'dialog_iframe.html',
                area: ['360px', '240px'],
                data: {
                    name: '李白',
                    sex: '男'
                }
            });
        });

        // url形式弹窗传值
        $('#btnDialog14').click(function () {
            admin.open({
                title: 'url形式弹窗传值',
                url: 'dialog_url.html',
                area: ['360px', '300px'],
                data: {
                    name: '妲己',
                    sex: '女'
                }
            });
        });

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