js实现提交表单的遮罩效果，防止表单重复提交

下面代码设定了5秒后取消遮罩，使用时可以修改代码，手动取消
<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
        </script>
        <title>test</title>
        <style type="text/css">
            .mask { 
				position: absolute; 
				top: 0px; 
				filter: alpha(opacity=60); 
				background-color: #777; 
				z-index: 1002; 
				left: 0px; 
				opacity:0.5; 
				-moz-opacity:0.5; 
			} 
			.center-block { 
				position: absolute; 
			}
        </style>
    </head>
    
    <body>
        <div id="mask" class="mask"></div>
        <div><i id='icon'></i>
        </div>
        <a href="javascript:;" οnclick="showMask()">点我显示遮罩层</a>
        <br />
        <a href="javascript:;" οnclick="aaa()">测试遮罩效果</a>
        <br />
    </body>
    <script>
        //显示遮罩层    
        function showMask() {
            $("#mask").css("height", $(document).height());
            $("#mask").css("width", $(document).width());
            $("#mask").show();

            $('#icon').addClass('fa fa-circle-o-notch fa-spin');
            $('#icon').parent().css("padding-top", $(document).height() / 3);
            $('#icon').parent().css("padding-left", $(document).width() / 2);
            $('#icon').parent().addClass('center-block');
            $("#icon").parent().show();
            setTimeout(hideMask, 5000);
        }
        //隐藏遮罩层  
        function hideMask() {
            $("#mask").hide();
            $("#icon").parent().hide();
        }

        function aaa() {
            alert("能触发事件");
        }
    </script>

</html>
下面是实现效果