小图片弹窗大图片
请教大神这个是什么实现的
收获季节
2017-09-22
2 回答
这个可以用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">
×
</button>
<img src="a.jpg" alt="">
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
运行效果如图
回答不易，望采纳
举报
0/150
提交
取消
