如何打開使用jquery的模態

-1

我有一個圖像，當我點擊圖像我想打開模式中的圖像，但是當我點擊圖像時，模式不工作或不顯示。有沒有人可以幫忙？如何打開使用jquery的模態

下面是代碼：

<div class="col-md-3 col-sm-3 col-xs-12"> 
    <div class="img-thumbnail" > 
     <a id="myModal" href="#" title="Cappuccino"><img id="cap_mod" class="img-responsive" src="images/Portfolio-img/flyer/thumb/cappuccino-thumb.jpg" alt="cappuccino"></a> 
     </div> 
</div><!--END OF col-md-3 col-sm-3 col-xs-12--> 


<!--MODAL CAPPUCCINO IMAGE GALLERY--> 
<div class="modal fade" id="myMODAL1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 

       <button type="button" class="close" data dismiss="modal" aria-hidden="true">&times;</button> 

      <h4 class="modal-title">BROCHURE - Cappuccino</h4> 
     </div> 

    <div class="modal-body"> 
     <img id="cappuccino_mod" class="img-responsive" 
     src="images/Portfolio-img/flyer/image-modal/cappuccino- 
     modal.jpg" alt="cappuccino"> 

    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data- 
     dismiss="modal">Close</button> 
    </div> 
    </div> 
    <div> 
    </div><!--END OF MODAL MODAL CAPPUCCINO IMAGE GALLERY--> 



<script> 
    $(document).ready(function){ 
    $("#myModal").on('click',(function){ 
     $("#cap_mod").attr('src',$("#cappuccino_mod").attr('src')); 
     $("#myMODAL1").modal('show');}) 
    } 
    </script>

來源

2014-10-07 egtdesign

你在你的代碼的幾個語法錯誤，我已經修改了它有下面一起來看看： -

$(document).ready(function(){ 
     $("#myModal").on('click',function() { 
       $("#cap_mod").attr('src',$("#cappuccino_mod").attr('src')); 
       $("#myMODAL1").show('slow'); 
     });   
    });

演示： - http://jsfiddle.net/yruopsg9/5/

我希望這是你想要的！

來源

2014-10-07 05:49:42 Neel

這不是我想要的警報，當我點擊縮略圖我想展示裏面的圖像的模式。 – egtdesign 2014-10-07 05:54:02

我已刪除警報，它只是爲了測試@egtdesign – Neel 2014-10-07 05:54:50

謝謝。內爾，我有兩個模態在我的身體頁面一個接觸和一個這個圖像。你編輯的代碼仍然不適合我，雖然它在小提琴中工作，是因爲我有兩種模式，這就是爲什麼它不工作？ – egtdesign 2014-10-07 06:12:55

您的引導代碼需要修復。包括頁面

這裏就無需除了bootstrap.js和jQuery任何JavaScript是一種DEMO

<div class="col-md-3 col-sm-3 col-xs-12"> 

<a href="#" title="Cappuccino" data-toggle="modal" data-target="#myModal"> 
<img id="cap_mod" class="img-responsive" src="http://placehold.it/100x100" alt="cappuccino"/></a> 

</div><!--END OF col-md-3 col-sm-3 col-xs-12--> 

<!--MODAL CAPPUCCINO IMAGE GALLERY--> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"> 
<span aria-hidden="true">&times; </span><span class="sr-only">Close</span></button> 
    <h4 class="modal-title" id="myModalLabel">BROCHURE - Cappuccino</h4> 
    </div> 
    <div class="modal-body"> 
    <img id="cappuccino_mod" class="img-responsive" 
    src="http://placehold.it/350x350" alt="cappuccino"/> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

    </div> 
    </div> 
    </div> 
    </div>

來源

2014-10-07 06:23:29 Macsupport

如何打開使用jquery的模態

回答

相關問題