모달 창에 스크롤을 추가 할 수 있습니까?

Question

그래?

기본적으로 모달은 많은 콘텐츠가 포함 된 매우 길며 하단에서 잘립니다. 모달에 스크롤 막대를 추가하여 사용자가 잘라내는 모든 콘텐츠를 볼 수 있도록하고 싶습니다.

스크롤 코드 :

div.clip_desc { 
height: 270px; 
overflow-y: scroll; 
} 

내가 여기 .. ​​스크롤 막대가 항상 일반 사이트에 모델의 외부 끝 스크롤 바 모달 주위 DIV하지만 추가 해봤 코드입니다 (모달 표시되지 않습니다 스크롤 포함)

모달 코드 :

이 어떻게 실제 모달에서 스크롤 막대를 추가 할 수 있습니다

<!-- Modal --> 
<div class="clip_desc"> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     </div> 
     <div class="modal-body" style="overflow:hidden;"> 
     <div class="col-md-12"> 
      <div class="my-profiletxt"></div> 
      <div class="queuepagevideo"></div> 
      <div class="col-md-3"> 
      <div class="qpbox-out"> 
       <div class="qpposter"><%= image_tag('qpposter.png') %></div> 
       <div class="qpimages"> 
       <%= image_tag('icon.jpg') %> 
       <%= image_tag('icon.jpg') %> 
       <%= image_tag('icon.jpg') %> 
       <%= image_tag('icon.jpg') %> 
       <%= image_tag('icon-one.jpg') %> 
       </div> 
       <div class="qpwatch-box"> 
       <div class="qphd-txt">HD</div> 
       <div class="qpwatch-img"><%= image_tag('watch-img.jpg') %></div> 
       <div class="qptxt-new">2:13</div> 
       </div> 
      </div> 
      </div> 

      <div class="qpvideotext"> 
      <p class="qpcliptitle">A Little Bacon</p> 
      <p class="qpdesc"> 
       When Lincoln fails to earn some bacon for breakfast, Jordan shows him that a little charm and kindness may get 
       you what you want. 
      </p> 
      <p class="qptopiclist"> 
       <span class="qptopic">TOPICS</span> <span class='qptaglist'></span> 
      </p> 
      <div class="qpbutton-box"> 
<!--    <a href="#"> 
       <div class="qpadd-txt">ADD TO QUEUE</div> 
       </a> --> 
       <a href="#"> 
       <div class="qpget-txtone">GET STREAM CODE</div> 
       </a> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

?

Answer 1

예 메인 div에 최대 높이를 부여한 다음 오버플로를줍니다. 스크롤하여 스크롤하십시오.

이 생 링크 참조 즐길 :

---

 <div class="container"> 

     <h3>Modal Example</h3> 

     <!-- Button to trigger modal --> 
     <div> 
      <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a> 
     </div> 

     <!-- Modal --> 
     <div id="myModal1" class="modal hide" tabindex="-1" role="dialog"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3>Standard Selectpickers</h3> 
      </div> 
      <div class="modal-body"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar odio quis interdum vulputate. Nam porta fermentum risus, sed tempor dolor vehicula vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quis ligula malesuada, auctor velit non, luctus ante. Aliquam egestas condimentum arcu eu condimentum. Nunc orci elit, molestie a ullamcorper sed, elementum at erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc aliquam, tortor quis lacinia consequat, nibh quam bibendum nisi, id condimentum turpis nulla sit amet nunc. Duis eu tristique velit. Curabitur eros dui, sodales vel ipsum sit amet, luctus congue nulla. Praesent vel pharetra mi, non egestas ipsum. Vestibulum quis nulla tincidunt, pretium lacus ultricies, vulputate velit. Sed eleifend justo eu tellus condimentum tempus. 

Suspendisse potenti. Donec scelerisque rutrum suscipit. Sed nec aliquet lacus, et volutpat ante. Nulla sed luctus sem. Pellentesque sit amet massa libero. Donec rhoncus risus quis dapibus hendrerit. Nullam urna tellus, fermentum a venenatis a, congue non turpis. Sed adipiscing gravida lorem, eget suscipit erat sodales eu. Phasellus id orci at magna porttitor sollicitudin vel vel enim. Mauris id lacus nec leo facilisis ultrices nec et sapien. Duis congue ac justo et egestas. Integer pretium dignissim malesuada. Proin tempus, enim nec congue sodales, erat diam auctor nisi, eu adipiscing libero nunc vitae nisl. Praesent ultrices risus non venenatis fringilla. Donec dolor augue, pretium in sagittis vitae, tincidunt non velit. Cras eu fermentum est, viverra fringilla mauris. 

Ut convallis placerat velit, non consectetur ipsum eleifend id. Fusce posuere, eros vitae interdum dignissim, metus neque tristique nibh, id egestas dolor eros non lacus. Mauris mollis felis tortor, quis lobortis diam venenatis id. Quisque et lobortis diam. Nulla venenatis tempus diam eget euismod. Vestibulum in justo bibendum, laoreet ligula ut, luctus enim. Cras nec iaculis dui, eget vestibulum dui. Praesent at purus et nunc tempor fermentum in a velit. Integer luctus, quam eget tempus luctus, turpis felis varius turpis, mattis tincidunt lacus nunc vel est. In sed magna sed tortor laoreet tempor. Pellentesque eget diam eget nibh vestibulum tempus. Nam commodo ligula nec leo sodales pretium. 

Donec scelerisque venenatis iaculis. Nullam urna tellus, facilisis a arcu ut, imperdiet luctus libero. Maecenas suscipit porta est eu mollis. Pellentesque ligula dui, eleifend vitae dolor in, congue varius lacus. Donec pulvinar enim vitae semper scelerisque. Aliquam sapien libero, scelerisque non malesuada at, ullamcorper non augue. Nulla sed est nec nulla ullamcorper elementum. Vivamus massa ligula, ultricies at ullamcorper at, sodales sed turpis. Ut congue, lectus eu accumsan lacinia, tortor velit accumsan augue, vel lacinia velit nisi quis nisl. Praesent mollis ante non risus posuere consectetur. Praesent ipsum quam, scelerisque id est ut, gravida cursus magna. Mauris vel justo eu diam pharetra bibendum. 

Mauris dignissim quam consectetur tempor commodo. Donec nec consequat felis. Curabitur in suscipit sem, at aliquet eros. Praesent semper accumsan suscipit. Donec malesuada dolor nec felis fermentum tempor. Nullam vel 

      </div> 
      <div class="modal-footer"> 
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
       <button class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 

    </div> 

<style> 

CSS

---

.btn-group { 
    z-index: 1051; 
} 

.modal-body{ 
    max-height:200px; 
    overflow:scroll; 
}