layer弹出表单

layer自定义弹出输入框,有些时候需要点击按钮后弹出输入框让用户选择或者填写表单,利用layer自定义的弹出可以很方便实现,

注意:弹出的按钮触发事件可以直接写函数名称,否则有冒泡等需要清理。

稍微加点修饰更好看

/*弹出需要*/
        .layui-layer-content {
            padding: 10px;
        }

在layer和bootstrap的条件下也很好用,效果图如下:


代码如下:


function show_input()
    {
        layer.open({
            type: 1,
            title: '下载设置',//没有标题的是不可以拖动的
            closeBtn: 0,
            shadeClose: true,
            moveType:1,//可拖动
            skin: 0,
            area:['450px'],
            content: '<div class="row" style="margin-top: 10px">' +
                '<div class="col-md-12">\n' +
                '    <div class="form-group">\n' +
                '        <label class="col-sm-3 control-label">温馨提示:</label>\n' +
                '        <div class="col-sm-9">\n' +
                '            <p class="form-control-static">下载的都是未核销未领取的代金券,单次下载的量不建议太多,易导致系统加载慢</p>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '    <div class="form-group">\n' +
                '        <label class="col-sm-3 control-label">开始编号:</label>\n' +
                '        <div class="col-sm-9">\n' +
                '            <input type="number" name="start" class="form-control" placeholder="请输入开始编号"> <span class="help-block m-b-none">开始下载的编号</span>\n' +
                '\n' +
                '        </div>\n' +
                '    </div>\n' +
                '    <div class="form-group">\n' +
                '        <label class="col-sm-3 control-label">结束编号:</label>\n' +
                '        <div class="col-sm-9">\n' +
                '            <input type="number" name="end" class="form-control" placeholder="请输入结束编号"> <span class="help-block m-b-none">结束下载的编号</span>\n' +
                '\n' +
                '        </div>\n' +
                '    </div>\n' +
                '    <div class="form-group">\n' +
                '        <label class="col-sm-3 control-label">下载量:</label>\n' +
                '        <div class="col-sm-9">\n' +
                '            <input type="number" name="total" class="form-control"  placeholder="请输入下载量"> <span class="help-block m-b-none">下载的数量,填写则从开始编号计算截取X条</span>\n' +
                '\n' +
                '        </div>\n' +
                '    </div>\n' +
                '    <div class="form-group">\n' +
                '        <label class="col-sm-3 control-label">操作:</label>\n' +
                '        <div class="col-sm-9">\n' +
                '           <a class="btn btn-success" onclick="forDown()" id="downloadSubmit">确定</a>\n' +
                '           <a style="margin-left: 10px" onclick="layer.closeAll()" class="btn btn-info" id="downloadCancel">取消</a>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '</div></div>'
        });
    }


评论/留言