如何修复第二个bootstrap模式失去垂直滚动条

Question

在引导3 - 如果您打开一个模式，然后在打开第二个模式之前隐藏它，垂直滚动条消失在第二个模式。任何人有任何想法如何解决这个问题？

实施例：http://jsfiddle.net/qfvnmbfd/

<a data-toggle="modal" href="#Modal1" class="btn btn-info">Open Modal 1</a> 

<div id="Modal1" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 id="modal-label">Modal 1</h4> 
      </div> 
     <div class="modal-body"> 
      <p><a href="#" id="btn2" class="btn btn-info">Open Modal 2</a></p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
     </div> 
    </div> <!--modal-content--> 
</div> <!--modal-dialog--> 

<div id="Modal2" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 id="modal-label">Modal 2</h4> 
      </div> 
     <div class="modal-body"> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
      <p>Content.</p> 
     </div> 
    </div> <!--modal-content--> 
</div> <!--modal-dialog--> 

<script> 
$(document).on("click", "#btn2", function (e) { 
      e.preventDefault(); 
      //$('.modal.in').modal('hide') 
      $('#Modal1').modal('hide'); 
      $('#Modal2').modal('show'); 
}); 
</script> 

Answer 1

我最终通过重写CSS固定它：

.modal { 
    overflow: auto; 
} 

工作小提琴：http://jsfiddle.net/qfvnmbfd/2/

Answer 2

代替此

$('#Modal1').modal('hide'); 
$('#Modal2').modal('show'); 

使用

$('#Modal1').modal("hide"); 
$('#Modal2').modal("show"); 

就是这样....

更新

<div id="Modal2" class="modal fade" style="overflow:scroll"> 

Answer 3

我有一个CSS的解决方案。使用下面的CSS。

#Modal2{ 
    overflow-y:auto; 
}