Bootstrap模態在顯示時消失

我試圖將此answer改編爲我的縮略圖，但它只能部分工作。Bootstrap模態在顯示時消失

我的問題是它一出現就消失。

什麼可能是解決方案？

<div class="thumbnail"> 
    <img src="http://cdn.shopify.com/s/files/1/0346/9741/products/Spaniel_PNG_1024x1024.png?v=1436758378" data-toggle="modal" data-target="#myModal"> 
    <div class="caption" > 
     <h4>Project One</h4> 
     <p>In this project I used HTML, CSS and Javascript.</p> 
    </div> 
</div> 

<!-- Modal --> 
<div id="myModal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-lg"> 

     <!-- 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"> 
       <img id="mimg" src=""> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div>

的Javascript：

$(window).load(function(){ 
    $('img').on('click',function(){ 
     var sr=$(this).attr('src');      
     $('#mimg').attr('src',sr); 
     $('#myModal').modal('show'); 
    }); 
});

來源

2015-09-26 Sebastian

需要更多的線索。嘗試檢查瀏覽器開發工具中的實時html，看看是否有模態，如果CSS衝突可能導致問題。圖像是否在可能有其他事件的錨點或其他標籤內點擊？ – charlietfl

http://codepen.io/RycerzPegaza/pen/meOeBq沒有css，這是整個代碼 – Sebastian

問題是你有圖像與手動modal.show()

<img data-target="#myModal" data-toggle="modal" src="...">

這些屬性中的衝突就已經切換相同的initalizing屬性自動衝突模態。

要麼刪除屬性或不手動調用$('#myModal').modal('show');

它工作正常，如果你註釋掉腳本

來源

2015-09-26 01:24:36 charlietfl

Bootstrap模態在顯示時消失

回答

相關問題