bootstrap+jquery 点击显示大图功能

最新推荐文章于 2023-10-10 22:30:00 发布

再远不过PC

最新推荐文章于 2023-10-10 22:30:00 发布

阅读量4.8k

点赞数

分类专栏： .....JavaScript/jQuery .....Bootstrap

本文链接：https://blog.csdn.net/DouBoomFly/article/details/72691825

版权

本文介绍如何利用Bootstrap的模态框和jQuery来创建一个点击显示大图的功能。详细步骤包括设置模态框HTML结构和编写jQuery代码来响应点击事件。

摘要由CSDN通过智能技术生成

这里用的是bootstrap的模态框

一、页面部分

①模态框部分：

<!-- 显示大图部分 -->
<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
	<div class="modal-dialog modal-lg" ><!-- style="display: inline-block; width: auto;" -->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="modalLabel"></h4>
			</div>
			<img alt="暂无图片" id="imgInModalID" src="" width="90%" >
		</div>