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

清疚 2022-06-04 01:25 311阅读 0赞

下面代码设定了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>

下面是实现效果

![Center][]

[Center]: /images/20220604/e09a92f47b5041a1aa3ab92615eb7b7d.png