原文鏈接：http://blog.csdn.net/cyh1111/article/details/52960747
背景
使用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; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
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="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>