Bootstrap通过模态框modal实现图片弹出放大
taotaoit Bootstrap 2018-12-20 4475 1
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

3471854 2237 31
最新评论
:kaixin: :haha:
评 phpExcel列数据自动换行的方法->getAlignment()->setWrapText(true);
666 :kaixin:
评 return和return false的区别
楼主很给力,请教了有一个问题,很细心给我解答,还帮我解决了问题。 :zhenbang: :zhenbang: :zhenbang:
评 留言
厉害 :zhenbang: :zhenbang: :zhenbang:
评 留言
牛批 : :haha:
评 google浏览器显示收藏夹/书签栏
文章标签更多
ThinkPHP (233)
Mysql (44)
DedeCms (33)
jQuery (56)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

直接放代码,不过效果不太好,因为模态框是有宽度的,拉伸图片到模态框大小,如果图片小于模态框,图片就变虚了;如果不拉伸图片,就会小于模态框大小,怎么都不好看,凑合用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>模态框(Modal)插件</title>
<!-- 引入 Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<script>
//显示大图    
function showimage(source){
	 $("#ShowImage_Form").find("#img_show").html("<image src='"+source+"' class='carousel-inner img-responsive img-rounded' />");
	 $("#ShowImage_Form").modal();
}
</script>
</head>
<body>
<!--小图-->
<center><img style="height: 100px;width: 100px; cursor:pointer;" src="cinqueterre.jpg" onclick="javascript:showimage('cinqueterre.jpg');" /></center>
<!--弹出模态框大图-->
<div class="modal fade" id="ShowImage_Form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				<div id="img_show"></div>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>
	
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> 
<script src="../js/jquery.min.js"></script> 
<!-- 包括所有已编译的插件 --> 
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

版权声明:本站原创文章,允许自由转载。

相关推荐
AdminLTE管理后台提示框,bootstrap框架提示框Tooltip
Bootstrap | 2018-08-16 10061
AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法: html代码: <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...
bootstrap修改col的间距
Bootstrap | 2019-09-11 6737
用bootstrap布局时会产生一些问题,比如col水平间距过大 修改方法: 重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现,col每列之间之所以有间距,是因为col里面的左右内边距都是15px形成的,这样...
评论:1条
评论加载中...
发表评论