duandeng1824 2018-03-28 14:12
浏览 82
已采纳

在单个bootstrap模式上显示图像

I am working on a task where I want few images and I want to display image in bootstrap modal.

I have done below code to to display image on modal on click of link, where link has below images. Each image have link.

Modal is opening with all the images, but issue is I don't want to create modal for each image.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Image Demo</title>

        <link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="container-fluid">
            <?php
            $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
            for ($cnt = 0; $cnt < count($images); $cnt++) {
                ?>
                <a href="#imagemodal_<?= $cnt ?>" data-toggle="modal" data-target="#imagemodal_<?= $cnt ?>">
                    <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
                </a>
                <div class="modal fade " id="imagemodal_<?= $cnt ?>" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
                        </div>
                    </div>
                </div>
                <?php
            }
            ?>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
    </body>
</html>

How can I achieve this ?

  • 写回答

3条回答 默认 最新

  • douchen5971 2018-03-28 14:34
    关注

    What you have to do is generating you image thumbs using php , and create your modal which has an empty image tag (add custom class to access it with jquery ) outside the loop then using jquery

    just create script which get the link from clicked image and set the src of the image tag inisde the modal ,

    your php code should look like :

    <?php
        $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
        for ($cnt = 0; $cnt < count($images); $cnt++) {
            ?>
            <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
                <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
            </a>

            <?php
        }
        ?>
            <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <img class="modal-content" src="" width="100px" height="100px"/>
                    </div>
                </div>
            </div>

    see below working snippet :

    $(function(){
  $("#image img").on("click",function(){
     var src = $(this).attr("src");
     $(".modal-img").prop("src",src);
  })
})
    .modal-img {
  width:100%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div id="image">
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://i2.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img4.jpg?resize=750%2C502" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://i1.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img2.jpg?resize=750%2C502" width="100px" height="100px"/>
    </a>
 <div>   
    <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <img class="modal-img" />
            </div>
        </div>
    </div>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据
  • ¥15 (关键词-阻抗匹配，HFSS，RFID标签天线)