使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认Modal出现页面滚动条,为了用户体验,不使用页面滚动条,在Modal body部分加垂直滚动条,Modal header和footer固定位置。
加入CSS样式
.modal-dialog { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .modal-content { /*overflow-y: scroll; */ position: absolute; top: 0; bottom: 0; width: 100%; } .modal-body { overflow-y: scroll; position: absolute; top: 55px; bottom: 65px; width: 100%; } .modal-header .close {margin-right: 15px;} .modal-footer { position: absolute; width: 100%; bottom: 0; }
Modal 代码
<!-- EditUser --> <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header" style="background-color: #307095;font-weight: bold;"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only"><sp:message code="sys.close" /></span> </button> <h4 class="modal-title" id="myModalLabel"><sp:message code="user.info"/>-<sp:message code="sys.edit"/></h4> </div> <div class="modal-body" > <form class="form-horizontal" id="editForm" action="<%=path%>/com/update" method="post"> <div class="form-group"> <label for="inputName" class="col-sm-3 control-label"><sp:message code="user.username"/></label> <div class="col-sm-9"> <input type="text" class="form-control input-sm" name="username" readonly="readonly"> </div> </div> ...其他代码省略 </form> </div> <!-- modal-body END --> <div class="modal-footer"> <button id="btn-submit" type="submit" class="btn btn-primary"><sp:message code="sys.submit"/></button> </div> </div> </div> </div>