Bootstrap模式 - 內容不出現

Question

我在我的網站上有一個模式，但是當我點擊按鈕時，疊加層出現，但是模態的內容沒有出現。

我的代碼：

<div id="FurryPP" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <p>Some text in the modal.</p> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

<a data-toggle="modal" data-target="#FurryPP">test</a> 

我的問題的演示：https://gyazo.com/cdc0db8a082043ed6140bb490cd7d1c4

Answer 1

缺席兩場</div>標籤。這將工作（JSFiddle）：

<div id="FurryPP" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
    </div> 

<a data-toggle="modal" data-target="#FurryPP">test</a> 

如果你有沒有準備好，加入下列順序以下庫：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

---

工作片段：

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="FurryPP" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 

 
<a data-toggle="modal" data-target="#FurryPP">test</a>

Answer 2

你缺少結束標記的股利。用你的代碼替換你的代碼

<div id="FurryPP" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> <!-- Was missing before --> 
</div> <!-- Was missing before --> 

希望這會有所幫助。謝謝

---

剛在w3schools.com上測試過它。在那裏正常工作。你使用哪個引導版本？

請加bootstrap.js和jQuery的沿bootstrap.css的解決方案。它肯定會起作用。

請添加按照以下順序庫：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>