模式關閉按鈕不工作...我做錯了什麼？

Question

我做了一個模式，使圖像彈出時，它被點擊，但我不能讓關閉按鈕工作出於某種原因。有人可以檢查我的代碼，看看我出錯了嗎？或者給我一些建議......謝謝！

<div id = "myModal" class = "modal"> 
     <div class = "modal-content"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <!-- Modal Content (The Image) --> 
      <img class="modal-content" id="mimg"> 

      <!-- Modal Caption (Image Text) --> 
      <div id="caption"></div> 
     </div> 
    </div> 
    <img id="myImg" src="http://i0.kym-cdn.com/photos/images/newsfeed/001/023/007/f29.png" alt="Trolltunga, Norway" width="300" height="200"> 

Answer 1

簡單的例子，如果你使用引導程序，確保做到這一點的引導方式。

此外，請確保參考是正確的。

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

#myImg { 
 
    width: 100%; 
 
    height: auto; 
 
}

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

 
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<div id="myModal" class="modal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
     <!-- Modal Content (The Image) --> 
 
     <img id="myImg" src="https://pbs.twimg.com/media/BU27_rrCYAAckFP.jpg" alt="Trolltunga, Norway"> 
 
     <!-- Modal Caption (Image Text) --> 
 
     <div id="caption">Modal Caption (Image Text)</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您的代碼未完成。嘗試添加像下面

<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" 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> 
 
Try it Yourself »