Bootstrap Modal 垂直方向加滚动条

最新推荐文章于 2025-05-13 10:21:04 发布

DDPEAS

最新推荐文章于 2025-05-13 10:21:04 发布

阅读量3.3w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： SpringMVC Jquery

本文链接：https://blog.csdn.net/cyh1111/article/details/52960747

Jquery 同时被 2 个专栏收录

6 篇文章

订阅专栏

SpringMVC

4 篇文章

订阅专栏

本文介绍了如何在Bootstrap Modal中添加垂直滚动条，以避免页面整体滚动，保持Modal头部和底部固定的用户体验。内容包括问题背景、预期效果展示及具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

使用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">&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>