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>