问答详情
源自：1-2 新朋友你在哪里（如何插入JS）

小图片弹窗大图片

http://img3.mukewang.com/59c3e4780001324704120293.jpg

http://img.mukewang.com/59c3e4780001d14e12140544.jpg

请教大神这个是什么实现的

提问者：收获季节 2017-09-22 00:12

个回答

  • 小白滴滴
    2017-09-22 09:53:22
    已采纳

    这个可以用bootstrap模态框完成。具体代码如下

    先把图片保存在你自己电脑上，随便一个文件夹里。我这里命名为a.jpg

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8"> 

    <title>模态框</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>


    <h2>图片弹出示例</h2>

    <!-- 按钮触发模态框 -->

    <button  data-toggle="modal" data-target="#myModal">

    <img src="a.jpg" alt="" style="width:350px">

    </button>

    <!-- 模态框（Modal） -->

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

    <div class="modal-dialog" >

    <div class="modal-content" style="width:650px">

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

    &times;

    </button>

    <img src="a.jpg" alt="">

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

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

    </div>

    </body>

    </html>

    运行效果如图

    http://img1.mukewang.com/59c46cf40001aa2007880560.jpg

    http://img1.mukewang.com/59c46cf50001cb7313320828.jpg

    回答不易，望采纳

    0
  • 左右手年华
    2017-09-22 09:49:33

    调用输出，记住就好了

    0