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>' }); }