新增 - 弹窗功能

public/common/css/block.css

@@ -284,8 +284,14 @@
 	right: 0px;
 	bottom: 0px;
 	background-color: #141A1D;
-	opacity: 0.4;
+	opacity: 0.6;
 	z-index: 998;
+	display: none;
+	transition: opacity 1s;
+}
+
+#balckWarp:hover {
+	opacity: 0.4;
 }
 
 /* 弹窗CSS */
@@ -295,4 +301,5 @@
 	top: 45%;
 	right: 45%;
 	z-index: 999;
+	display: none;
 }

public/common/js/tools.js

@@ -160,4 +160,32 @@
 		return text;
 	}
 
+	// 弹窗
+	TOOLS.popWind = function (config) {
+		var popWinContext = $("#PopWinContext");
+		MCSERVER.popWindCallback = config.callback || function () {}; //全局的callback变量
+		var css = config.style || null;
+		popWinContext.html("<p>正在加载信息框,请稍等...</p>");
+
+		$(".PopWin").css(css)
+			.css({
+				display: "block"
+			});
+		$("#balckWarp").css({
+			display: "block"
+		});
+		popWinContext.load(config.template, function (response, status, xhr) {
+			if (status != 'success') {
+				popWinContext.html("信息框加载失败！请保持网络通畅！单击灰色区域关闭！");
+				return;
+			}
+		});
+	}
+	TOOLS.popWindClose = function (res) {
+		$(".PopWin").removeAttr("style");
+		$("#balckWarp").removeAttr("style");
+		//返回结果
+		MCSERVER.popWindCallback(res);
+	}
+
 })();

public/index.html

@@ -148,11 +148,14 @@
 		<div class="Panel">
 			<div class="PanelTitle">信息框</div>
 			<div class="PanelBody">
-				AAAAAAAAAA
+				<div id="PopWinContext">
+					<!-- 动态 HTML -->
+					<p>正在加载信息框,请稍等...</p>
+				</div>
 			</div>
 		</div>
 	</div>
-	<div id="balckWarp"></div>
+	<div id="balckWarp" onclick="TOOLS.popWindClose(null)"></div>
 
 
 	<!--JavaScript 文件引用，顺序不能乱，大部分 js 都是依赖于前 js 的-->

public/template/center.html

@@ -184,12 +184,15 @@
 <script>
 	function testcl() {
 		console.log("DOING");
-		var popwin = new PopWin({
+		TOOLS.popWind({
 			style: {
-				width: "100px",
+				width: "200px",
 				height: "30px"
 			},
-			template: "404_page.html"
+			template: "404_page.html",
+			callback: function (result) {
+				console.log("得到结果", result)
+			}
 		});
 	}
 	//创建