1. 首頁
  2. 問答
  3. 模態滾動無法工作，如果我有一個模態內的模態

模態滾動無法工作，如果我有一個模態內的模態

2017-02-28 83 views
0

我有模態內的模態，它工作正常。但後來我注意到，當第一模態超出屏幕，並出現第一模態的滾動它的工作原理，但是當我打開第二模態並關閉它，第一模態不會滾動。模態滾動無法工作，如果我有一個模態內的模態

繼承人一個片段，告訴你。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button> 
 

 

 

 
<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 

 
     \t <button type="button" class="btn btn-info btn-lg" data-toggle="modal"  data-target="#test2">Open Modal 2</button> 
 
     \t 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     \t 
 
     content 
 
     \t 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 

 
</body> 
 
</html>

沒有人知道失敗的原因，當我打開滾動和關閉第二模式？ 在此先感謝。

來源

2017-02-28 ooo-Ghost-ooo

回答

1

設置溢出：auto;到您的＃test1容器。這將是solutiuon

#test1 { 
 
overflow: auto; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button> 
 

 

 

 
<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 
     sample<br> 
 

 
     \t <button type="button" class="btn btn-info btn-lg" data-toggle="modal"  data-target="#test2">Open Modal 2</button> 
 
     \t 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     \t 
 
     content 
 
     \t 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 

 
</body> 
 
</html>

來源

2017-02-28 12:00:47 MKAD

+0

感謝的人。有效。儘管起初第一個模態沒有滾動，而是在模態外滾動，但我試圖添加溢出：auto;到第一個模態。然後它滾動.. –

0

從Bootstrap docs

「多模態開不支持 一定不要打開一個模式，而另一種是仍然可見。同時顯示多個模式的需要自定義代碼。」

所以你需要自定義代碼來考慮每個模式的滾動位置和高度。

來源

2017-02-28 12:00:46 ZimSystem

相關問題

 相關問題