使用Codeigniter在模态中使用jquery显示图像

时间:2017-02-22 06:47:05

标签: javascript php jquery twitter-bootstrap codeigniter

如何使用从中调用id的jquery以模态(#photoss)显示图像:

 <div class=" top-deal">   
     <a data-toggle="modal" href="#" data-target="#tallModal" class="mask tt" ... photoss="<?php echo $rec->ss;?>" > 

这是我的剧本:

    <script type="text/javascript">
            $(document).ready(function(){

              $(".tt").click(function(){

                ....
                 $("#kabkota").html($(this).attr("kabkota"));

                 $('#photoss').html('<img src="'+base_url+'upload/screenshoot/'+ss+'" class="img-responsive">'); // show photo
                 });
               });
          </script> 

这是我的模态

    <div id="tallModal" class="modal modal-wide fade">
    <div class="modal-dialog">
     ....
         <h4 id='namaaplikasi'> Nama Aplikasi</h4> </br>
             <div id="photoss">

                </div>
            ...
  </div><!-- /.modal -->

1 个答案:

答案 0 :(得分:3)

您可以像这样以模态显示图像。

使用锚点:

删除数据目标属性并将其用作普通锚点。

 <a href="javascript:;"  class="mask tt"  photoss="<?php echo $rec->ss;?>" > 

制作如下脚本:

 <script type="text/javascript">

            $(document).ready(function(){

              $(document).on("click",".tt",function(){

                var ss  =    $(this).attr("photoss");
                var base_url = "your base url";


                 $('#photoss').html('<img src="'+base_url+'upload/screenshoot/'+ss+'" class="img-responsive">');


                 $("#tallModal").modal("show");

               });
             });   
          </script>