新闻中心内容页点击看大图

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/content_news.html

@@ -2,6 +2,19 @@
 <#macro script_import>
 	<script src="${CPATH}/counter?cid=${content.id!}"></script>
 </#macro>
+<#macro script>
+$("dev img").click(function(event){
+	var src = event.target.src, box = $('#image-box');
+	box.show();
+	box.find('img').attr('src', src);
+	box.find('a').click(function () {
+		box.hide();
+	});
+	box.dblclick(function () {
+		box.hide();
+	});
+});
+</#macro>
 <#macro css>
 </#macro>
 <@layout>
@@ -177,6 +190,65 @@
 		margin: auto;
 		margin-top: 40px;
 	}
+
+	/* 预览框 */
+	#image-box .x-floating-wrap {
+		position: fixed;
+		z-index: 99998;
+		background: #000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0.5;
+	}
+	#image-box .x-floating {
+		position: fixed;
+		z-index: 99999;
+		width: 1200px;
+		height: 600px;
+		top: 50%;
+		left: 50%;
+		margin-left: -600px;
+		margin-top: -300px;
+		line-height: 560px;
+		text-align: center;
+		vertical-align: middle;
+	}
+	#image-box .x-floating img {
+		margin: auto auto;
+		max-width: 100% !important;
+		max-height: 600px !important;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none
+	}
+
+	#image-box .x-close-wrap {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 100000;
+		width: 120px;
+		height: 120px;
+		margin: -60px -60px 0 0;
+		border-radius: 100%;
+		background: #000;
+		opacity: .3
+	}
+
+	#image-box .x-close-wrap a {
+		position: absolute;
+		left: 25px;
+		bottom: 25px;
+		font-size: 42px;
+		color: #fff
+	}
+
+	#image-box .x-close-wrap:hover {
+		opacity: .7
+	}
 </style>
 <section id="banner" class="banner">
 	<div class="container">
@@ -256,5 +328,17 @@
 				</div>
 			</div>
 		</div>
+
+		<!--查看大图  怎么让子元素铺满整个屏幕  在不影响父元素的情况下-->
+		<div id="image-box" style="display: none;">
+			<div class="x-close-wrap" title="关闭">
+				<a href="javascript:void(0);">&times;</a>
+			</div>
+			<div class="x-floating-wrap"></div>
+			<div class="x-floating">
+				<img/>
+			</div>
+		</div>
+	</div>
 </section>
 </@layout>