小图片弹窗大图片-慕课网

首页课程实战体系课手记专栏慕课教程

小图片弹窗大图片

来源：1-2 新朋友你在哪里（如何插入JS）

收获季节

2017-09-22 00:12

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

写回答关注

2回答

小白滴滴

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>

<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">
×
</button>
<img src="a.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
运行效果如图
回答不易，望采纳

1 0

收获季节

这个效果很好，但是我还没学bootstrap

2017-09-22 23:32:45

共 1 条回复 >
左右手年华

2017-09-22 09:49:33

调用输出，记住就好了

0 0

JavaScript入门篇

JavaScript做为一名Web工程师的必备技术，本教程让您快速入门

739822 学习 · 9566 问题

相似问题

怎么实现点击一个图片然后图片更换成另一个图片？

回答 2

点图标没反应，弹不出窗口，求大神帮忙~~~

回答 1

js怎么控制我这个div里的图片放大缩小

回答 1

窗口大小改动

回答 4

怎么把图片显示出来

回答 3

打开慕课网App查看更多内容