点击图片放大，模态窗效果

最新推荐文章于 2024-06-29 13:53:58 发布

baibai_-

最新推荐文章于 2024-06-29 13:53:58 发布

阅读量369

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42952532/article/details/88665486

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需要引入bootstrap 和jq

<body>

<img src="warframe.png" onclick="showMaxImg(this)"  />

<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="display:inline-block;width:auto;">
       <div class="modal-content">
           <div id="imgshow"></div>
       </div>
   </div>
</div>


<script type="text/javascript">
    function showMaxImg(obj){
        var src=$(obj).attr("src");
        $("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
        $("#imgModal").modal('show');
    }
</script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

baibai_-

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
点击图片放大，模态窗效果

需要引入bootstrap 和jq<body><img src="warframe.png" onclick="showMaxImg(this)" /><div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-...
复制链接

扫一扫