小圖片彈窗大圖片
請教大神這個是什么實現(xiàn)的
收獲季節(jié)
2017-09-22
2 回答
舉報
0/150
提交
取消
2017-09-22
舉報
2017-09-22
這個可以用bootstrap模態(tài)框完成。具體代碼如下
先把圖片保存在你自己電腦上，隨便一個文件夾里。我這里命名為a.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">?
<title>模態(tài)框</title>
<link rel="stylesheet" >
<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>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button ?data-toggle="modal" data-target="#myModal">
<img src="a.jpg" alt="" style="width:350px">
</button>
<!-- 模態(tài)框（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>
運行效果如圖
回答不易，望采納
2017-09-22
調(diào)用輸出，記住就好了