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

最新推荐文章于 2021-03-17 22:15:31 发布

半湖思絮

最新推荐文章于 2021-03-17 22:15:31 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html js

本文链接：https://blog.youkuaiyun.com/dulinanaaa/article/details/78678626

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

html

4 篇文章

订阅专栏

本文介绍了一个简单的网页遮罩效果实现方案，通过HTML、CSS及jQuery来创建并展示遮罩层，5秒后自动取消遮罩效果。代码中包含显示和隐藏遮罩层的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面代码设定了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:;" onclick="showMask()">点我显示遮罩层</a>
        <br />
        <a href="javascript:;" onclick="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>

下面是实现效果