Bootstrap通过模态框modal实现图片弹出放大

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

bootstrap 模态框 Modal 图片放大

打开边栏(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管理后台，执行Plugins.Tips提示框...

后一篇

bootstrap tab标签切换时事件的使用

Bootstrap | 2018-08-16 12361

AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法： html代码： <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...

bootstrap修改col的间距

Bootstrap | 2019-09-11 9901

用bootstrap布局时会产生一些问题，比如col水平间距过大修改方法：重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现，col每列之间之所以有间距，是因为col里面的左右内边距都是15px形成的，这样...