add mask effect of message

base.js

@@ -20,9 +20,12 @@ $(function () {
 	});
 	$(document.body).on('click','.msg-footer span',function(){
 		var p = $(this).parent().parent();
+		var m = $('.mask');
 		p.css('animation','fadeOut .5s');
+		m.css('animation','fadeOut .5s');
 		setTimeout(function(){
 			p.remove();
+			m.hide();
 		},500);
 	});
 })();
@@ -43,6 +46,7 @@ var message = new function () {
 			'</div>' +
 			'</div>'
 		$(document.body).append(html);
+		$('.mask').show().css('animation','fadeIn .5s');
 		$('#mh-'+id).Drag($('#mc-'+id));
 		return id;
 	}

index.html

@@ -54,6 +54,8 @@
 
         </div>
     </div>
+
+    <div class="mask"></div>
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <script src="drag.js"></script>
     <script src="base.js"></script>

myui.css

@@ -83,6 +83,16 @@
 	color: rgb(50, 50, 50)
 }
 
+.mask{
+	position: absolute;
+	display: none;
+	width:100%;
+	height:100%;
+	background-color:rgba(56, 56, 56, 0.747);
+	z-index:998;
+	animation-fill-mode: backwards
+}
+
 @keyframes fadeIn {
 	from {
 		opacity: 0