Twitter Bootstrap燈箱無法正常工作

我正在嘗試使用Twitter Bootstrap燈箱。Twitter Bootstrap燈箱無法正常工作

我的代碼：

<html> 
    <head> 
     <title>LightBox</title> 
     <link rel="stylesheet" href="bootstrap-combined.min.css" /> 
     <link rel="stylesheet" href="bootstrap-lightbox.css" /> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <h2>HELLO</h2> 
        <div id="lightBoxId" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
         <div class="lightbox-content"> 
          <img src="cubsimba141.gif" /> 
          <div class="lightbox-caption"> 
           <p>This is test image</p> 
          </div> 
         </div> 
        </div> 
        <a data-toggle="lightbox" href="#lightBoxId" class="span2 thumbnail"> 
         <img src="cubsimba141.gif" /> 
        </a> 
       </div> 
      </div> 
     </div> 

     <script src="jquery.min.js"></script> 
     <script src="bootstrap.min.js"></script> 
     <script src="bootstrap-lightbox.js"></script> 
    </body> 
</html>

上面的代碼能向我展示燈箱點擊縮略圖後。當我點擊該燈箱外部時，需要隱藏該燈箱，但它不適合我。

來源

2014-07-04 AkshayP

UPDATE我修復了您的代碼。我不得不改變模態的HTML。看看這個updated link。還附上下面的代碼。

的Javascript

$(document).ready(function(){ 
    $(".toggle-modal").click(function(){ 
     $("#myModal").modal('toggle'); 
    }); 
});

HTML

<h1>Modal Simple Demo</h1> 
<!-- Button HTML (to Trigger Modal) --> 
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a> 

<!-- Modal HTML --> 
<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Confirmation</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Do you want to save changes you made to document before closing?</p> 
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div>

看來你忘了，使其功能與JavaScript。我創建了這個演示。看看... Demo Link。

來源

2014-07-04 08:27:06 manosim

該按鈕有竅門。但仍然在外部點擊該彈出框沒有隱藏該框。可能我錯過了任何Js/css文件，你能幫我嗎？ – AkshayP

嗯。它爲我做。默認情況下，它應該在模態外點擊時關閉。嘗試使用這個'更新代碼。 – manosim

Twitter Bootstrap燈箱無法正常工作

回答

相關問題