부트 스트랩 모달 본문에 스크롤 막대 추가

부트 스트랩 모달 본문에 스크롤 막대를 추가하려고합니다. 그러나 내용 전체에 추가됩니다. 본문에만 추가하는 방법. 내용이 긴 모달을 사용했으며, 최대 높이에 도달했을 때 모달이 자동으로 스크롤되었습니다. 부트 스트랩 모달 본문에 스크롤 막대 추가

이

내 코드

<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>

예상대로 작동하지 않는 것입니다.

이

출처

2017-12-26 Mapa

당신이 그것을 위해 바이올린을 준비한다면 그것은 다른 사람들이 당신의 코드로 체크/플레이하는 것이 더 쉬울 것입니다. – Alp

참조 : https : //www.bootply.com/T0yF2ZNTUd – Super

<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>

출처

2017-12-26 09:08:25

그냥 오버 플로우가 숨겨져 제공 주셔서 감사합니다 모달 창은 최대 크기에 도달 않지만, 그냥 거기에 그 내용을 인하하고, 글도 displayed.Answers 환영하지 않습니다 .modal 클래스에 오버 플로우 스크롤을 제공합니다 ...

호프 그것은 당신을 도울 것입니다 :)

출처

2017-12-27 04:35:23

부트 스트랩 모달 본문에 스크롤 막대 추가

답변

관련 문제