添加一个漂亮的提示框

Author: c0ny1

css/index.css

@@ -172,4 +172,65 @@ p code {
 #footer a{
 	text-decoration: none;
 	color: #A5041D;
+}
+
+.mask {
+	width:100%; 
+	height:100%; 
+	background:rgba(0,0,0,0.6); 
+	display:none; 
+	position:fixed; 
+	_position:absolute; 
+	top:0; left:0; 
+	z-index:99;
+}
+
+.dialog {
+	min-height:120px;
+	background:#393D48;
+	color:#fff;display:none;
+	position:fixed; top:20%;
+	left:50%; 
+	z-index:100; 
+	box-shadow:3px 3px 5px #000;
+	-webkit-border-radius: 5px;
+}
+
+.dialog-title {
+	background:#91440F;
+	width:100%;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+	-webkit-border-radius: 5px 5px 0px 0px;
+}
+
+.dialog a.close { 
+	display:block; 
+	width:22px; 
+	height:22px; 
+	background:url(../img/close.png) center no-repeat #91440F; 
+	text-indent:-9999em;
+	margin-right: 10px;
+	margin-top: 5px;
+}
+
+.dialog a.close { 
+	position:absolute; top:0; 
+	right:0; 
+	z-index:101;
+}
+
+.dialog.loading { 
+	background:url(../img/loading.gif) center no-repeat #393D48;
+}
+
+.dialog-content {
+	line-height: 20px;
+	padding:22px 10px 10px 10px;
+	border-top: 1px solid #000;
+	-webkit-border-radius: 0px 0px 5px 5px;
+	/*过长文本自动换行*/
+	word-break: break-all;
+	word-wrap: break-word;
 }

footer.php

@@ -2,6 +2,11 @@
 		<div id="footer">
 			<center>Copyright&nbsp;@&nbsp;2018&nbsp;by&nbsp;<a href="http://gv7.me">c0ny1</a></center>
 		</div>
+		<div class="mask"></div>
+		<div class="dialog">
+		    <div class="dialog-title">提&nbsp;示<a href="javascript:void(0)" class="close" title="关闭">关闭</a></div>
+		    <div class="dialog-content"></div>
+		</div>		
 </body>
 <script type="text/javascript" src="<?php echo $site_root;?>/js/jquery.min.js"></script>
 <script type="text/javascript" src="<?php echo $site_root;?>/js/prism.js"></script>

img/close.png

@@ -14,19 +14,44 @@ function clean_upload_file(){
 		type: 'get',  
 		url: "../rmdir.php?action=clean_upload_file",	
 	}).success(function(data) {
-		alert(data);
-	}).error(function() {  
-		alert("删除失败！");  
+		Dialog.open(400,200,data);
+	}).error(function() {
+		Dialog.open(400,150,"删除失败！");
 	}); 
 }
 
  function get_prompt(){
 	$.ajax({  
 		type: 'get',  
 		url: "helper.php?action=get_prompt", 
-	}).success(function(data) {  
-		alert(data);  
+	}).success(function(data) {
+		Dialog.open(400,200,data);
 	}).error(function() {  
-		alert("获取提示失败！");  
+		Dialog.open(400,150,"获取提示失败！");
 	}); 	
- }
+ }
+
+$(function () {
+    $('.dialog').find('a.close').bind("click", function () {
+        Dialog.close();
+    });
+});
+
+var Dialog = {
+    mask: $('.mask'),
+    dialog: $('.dialog'),
+    content: $('.dialog-content'),
+    open: function (width, height, appendHtml) {
+        Dialog.mask.fadeIn(500);
+        Dialog.dialog.css({ width: width, height: (height + 22), marginLeft: -(parseInt(width) / 2) }).addClass('loading').fadeIn(500, function () {
+            Dialog.dialog.removeClass('loading');
+            Dialog.content.append(appendHtml);
+        });
+    },
+    close: function () {
+        Dialog.mask.fadeOut(500);
+        Dialog.dialog.fadeOut(500, function () {
+            Dialog.content.empty();
+        });
+    }
+}

img/loading.gif

@@ -28,7 +28,7 @@ function delDirAndFile($dirName){
 		}else{
 			$n_fail++;
 		}
-		return '删除成功：'.$n_success.',删除失败:'.$n_fail;
+		return '删除成功：'.$n_success.'，删除失败：'.$n_fail.'！';
 	}
 }