부트 스트랩 모달 팝업이 제대로 작동하지 않습니다.

Question

모달 팝업은 간단합니다.

.modal-backdrop { 
     background-color: #000000; 
     bottom: 0; 
     left: 0; 
     position: fixed; 
     right: 0; 
     top: 0; 
     z-index: 1040; 
    } 

     .modal-backdrop.fade { 
      opacity: 0; 
     } 

      .modal-backdrop, .modal-backdrop.fade.in { 
       opacity: 0.8; 
      } 

    .modal { 
     background-clip: padding-box; 
     background-color: #FFFFFF; 
     border: 1px solid rgba(0, 0, 0, 0.3); 
     border-radius: 6px; 
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     left: 50%; 
     margin-left: -280px; 
     outline: medium none; 
     position: fixed; 
     top: 10%; 
     width: 560px; 
     z-index: 1050; 
    } 

     .modal.fade { 
      top: -25%; 
      transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s; 
     } 

      .modal.fade.in { 
       top: 10%; 
      } 

    .modal-header { 
     border-bottom: 1px solid #EEEEEE; 
     padding: 9px 15px; 
    } 

     .modal-header .close { 
      margin-top: 2px; 
     } 

     .modal-header h3 { 
      line-height: 30px; 
      margin: 0; 
     } 

    .modal-body { 
     max-height: 400px; 
     overflow-y: auto; 
     padding: 15px; 
     position: relative; 
    } 

    .modal-form { 
     margin-bottom: 0; 
    } 

    .modal-footer { 
     background-color: #F5F5F5; 
     border-radius: 0 0 6px 6px; 
     border-top: 1px solid #DDDDDD; 
     box-shadow: 0 1px 0 #FFFFFF inset; 
     margin-bottom: 0; 
     padding: 14px 15px 15px; 
     text-align: right; 
    } 

     .modal-footer:before, .modal-footer:after { 
      content: ""; 
      display: table; 
      line-height: 0; 
     } 

     .modal-footer:after { 
      clear: both; 
     } 

     .modal-footer .btn + .btn { 
      margin-bottom: 0; 
      margin-left: 5px; 
     } 

     .modal-footer .btn-group .btn + .btn { 
      margin-left: -1px; 
     } 

     .modal-footer .btn-block + .btn-block { 
      margin-left: 0; 
     } 

위의 모달 팝업 CSS와 HTML

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

      <!-- Modal --> 
      <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h3 id="myModalLabel">Modal header</h3> 
       </div> 
       <div class="modal-body"> 
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 

        <p>praesent commodo cursus magna, vel scelerisque nisl consectetur et. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
        <p> 
         aenean lacinia bibendum nulla sed consectetur. praesent commodo cursus magna, vel scelerisque nisl consectetur et. donec sed odio dui. donec ullamcorper nulla non metus auctor fringilla. 
        </p> 
        <p> 
         cras mattis consectetur purus sit amet fermentum. cras justo odio, dapibus ac facilisis in, egestas eget quam. morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
        </p> 
        <p> 
         praesent commodo cursus magna, vel scelerisque nisl consectetur et. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
        </p> 
        <p> 
         aenean lacinia bibendum nulla sed consectetur. praesent commodo cursus magna, vel scelerisque nisl consectetur et. donec sed odio dui. donec ullamcorper nulla non metus auctor fringilla. 
        </p></div> 
       <div class="modal-footer"> 
        <button class="btn" data-dismiss="modal">Close</button> 
        <button class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 

은, 그 결과는 아래처럼되어 있습니다. 어떠한 제안 ? 자동, 그런데이 된 부트 스트랩 (2.XX)

http://jsbin.com/urAYAkOM/21/edit 

Answer 1

나는 그것에 대해 overlow-Y, 그것은 CSS에서 찾아보세요되고 fixt있다 overflow : 자동. .modal-body에서. 그것은이어야한다

 

    .modal-body { 
     max-height: 400px; 
     padding: 15px; 
     position: relative; 
    } 

Answer 2

제거에서 잘 보일 것 :