Question

我试图将滚动条添加到bootstrap模态体。但它添加到整个内容。如何将它添加到body.was使用具有长内容的模式，并且当达到给定的最大高度时模态自动滚动。

这是我的代码

<head>
<!-- Bootstrap CSS-->
<link href="/<s:text name="app.name"/>/css/bootstrap.min.css" rel="stylesheet" type="text/css">

.modal-body {
max-height: calc(100vh - 212px);
overflow-y: auto;
}
</head>


<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">
<s:text name="roles"/>
</button>
</s:if>
</div>

<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%;  margin-top: 60px; margin-bottom:30px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel"><s:text name="headingRoles"/></h4>
</div>

<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>

<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>

<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>

它没有按预期工作。模态窗口确实达到最大尺寸，但它只是在那里削减其内容，甚至没有显示页脚。欢迎使用答案

谢谢

Answer 1

只提供隐藏到.modal类的溢出，并为模态体提供溢出滚动...

.modal .modal-content{
overflow:hidden;
}
.modal-body{
overflow-y:scroll; // to get scrollbar only for y axis
}

希望它会对你有所帮助:)。

Answer 2

＆＃13;

<head>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body,html{
        width:100%;
        height:100%;
        padding:0px;
margin:0px;
}
.modal-dialog{
        height:calc(100% - 60px);
}
.modal-content{
  height:100%;
 }
.modal-header{
        height:50px;

}
.model-footer{
        height:75px;
}
.modal-body {
height:calc(100% - 125px);
overflow-y: scroll;     /*give auto it will take based in content */
}
</style>
</head>


<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">Open model
<s:text name="roles"/>
</button>
</s:if>
</div>

<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel"><s:text name="headingRoles"/></h4>
</div>

<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>

<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>

<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>

＆＃13;

Answer 3

https://getbootstrap.com/docs/4.5/components/modal/#exampleModalLongTitle

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

添加滚动条到bootstrap模态体

3 个答案: