如何打开使用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的模态

回答

相关问题