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

来源：互联网发布：网络宣传有什么好处编辑：程序博客网时间：2024/06/11 02:43

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

下面是实现效果

阅读全文

0 0