bootstrap4 在一个页面上有多张小图片,如何需要点击每一张图片打开模态窗显示大图?

lbdoc 发布于 2018/05/26 18:58
阅读 1K+
收藏 1

bootstrap4 ,在一个页面上有多张小图片,需要点击图片打开模态窗显示大图,需要在代码中添加多个模态窗代码块吗?一张图片一个?因为模态窗的内容地方插入一个 <img标签。可以显示出来。但是有多张图片,如何处理?

=====================

模态窗显示图片方式如下:

这儿插入图片

<img src="picture/IMG_a1.jpg" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter">

这儿是模态窗代码

<!-- Modal -->

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body text-center">

     <!--图片地址-->  <img src="picture/IMG_a1.jpg" class="img-fluid">

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>

页面上每一张图片读需要这样一大块代码?

加载中
返回顶部
顶部