Bootstrap Modal 垂直方向加滚动条

原文链接：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">&times;</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>