Question

我有一个图像，当我点击图像时我想以模态打开图像但是当我点击图像时，模态不工作或不显示。这里有人可以提供帮助吗？

以下是代码：

 <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>

Answer 1

您的代码中有几个语法错误我修改了它，如下所示： -

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

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

我希望这就是你想要的！

Answer 2

您的引导代码需要修复。除了页面上包含的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>

如何使用jquery打开模态

2 个答案: