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

最新推荐文章于 2021-03-17 22:15:31 发布
最新推荐文章于 2021-03-17 22:15:31 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dulinanaaa/article/details/78678626
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
html
4 篇文章 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>

下面是实现效果


半湖思絮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页提交时添加遮罩层
飞翔中的菜鸟
10-10 5850
// 表单提交遮罩 $(document).ready(function() { $("form").submit(function() { // 添加 GRAYLAYER.create("grayLayer-div"); window.onblur = function() { // 删除 GRAYLAYER.del("grayLayer-div"); }; })
遮罩层 javascript js 数据提交
07-05
点击提交，会出现遮罩层，此时界面左右功能被禁用，提交成功后，遮罩层消失！
防止页面重复提交
weixin_30783913的博客
05-16 63
当页面Get的时候： 生成一个Token(如GUID 、MD5等字符串),存入页面一个隐藏域 ，且存入Session 当页面提交的时候 获取隐藏域的值，和服务器Session进行校验 校验成功 清除Session 转载于:https://www.cnblogs.com/zjflove/p/4508191.html...
js按钮 防重复提交
aan5489的博客
02-05 190
给html 按钮加id属性 例： <button id="addBtn" onclinck="check()"> </button> 在对应的js上只需要加 $("#addBtn").attr('onclick',''); 转载于:https://www.cnblogs.com/java-xz/p/8417883.html...
创建一个具有全屏遮罩层的表单
weixin_43502084的博客
11-27 430
ps: 1.表单一定要设置position属性 2.遮罩层的z-index值一定要比表单小 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;表单遮罩&
asp.net表单提交时防重复提交并执行前台的JS验证
10-26
通过添加一个遮罩层和加载动画来防止用户重复点击提交按钮，并通过一个状态变量来控制表单的提交状态，从而在不影响用户操作体验的前提下，有效防止了重复提交的发生。同时，通过参考网上的现有方法，并结合项目中的...
js制作带有遮罩弹出层实现登录注册表单特效代码分享
10-23
在进行前端开发时，经常会遇到需要实现登录注册表单特效的场景，其中使用JavaScript来制作带有遮罩弹出层的表单特效是一种常见的交互效果。本文将详细介绍使用JavaScript、HTML以及CSS来实现带有遮罩层的登录注册...
ajax 提交小例子.带表单验证和遮罩等待效果
07-22
这个小例子是关于如何利用Ajax实现一个带有表单验证和遮罩等待效果的交互式用户体验。下面我们将深入探讨其中涉及的技术和知识点。 首先，`ajax.php`和`login.php`是处理后台请求的PHP脚本。`ajax.php`通常用于接收...
jquery-showloading遮罩层-防重复提交
09-21
"jquery-showloading遮罩层-防重复提交"是一款基于jQuery的插件，它旨在解决用户可能误点击导致的重复提交问题，并提供良好的加载反馈，提升用户体验。这款插件通过创建一个遮罩层来阻止用户在数据处理期间进行额外...
原生js实现半透明遮罩层效果具体代码
10-27
使用原生JavaScript（原生js）实现半透明遮罩层，不仅能够加深对JavaScript的理解，还能在不依赖外部库（如jQuery等）的情况下，实现丰富的用户界面交互效果。 在给出的代码示例中，通过HTML、CSS和JavaScript相...
弹出一个遮罩层有正在加载效果的文字
12-13
实现： 复制代码代码如下: <!doctype html> <html> <head> <title>遮罩层</title> <meta charset=”utf-8″ /> <style> #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.44); } #coverShow{ display:none; position:fixed; z-index:2; top:50%; left:50%; border:1
js实现数据加载，页面遮罩效果
weixin_34208283的博客
09-30 682
为什么80%的码农都做不了架构师？>>> ...
php点击弹出遮罩层form表单,JavaScript_js实现遮罩层弹出框的方法，本文实例讲述了js实现遮罩层 - phpStudy...
weixin_39655049的博客
03-17 147
#H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}#H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointe...
用js实现弹出最简单的模式化遮罩层
xubolqingqin的专栏
12-03 653
假设我们有一个容器container如下:        #container{width:auto;height:auto; overflow:hidden;}        /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏，之所以设置这个属性，是为了解决ie8及以下版本浏览器兼容性问题*/   现在要在网页中弹出一个di
轻松实现页面提交时，显示“提交中..”
weixin_30342209的博客
08-28 104
我也从网上看了不少文章，但没有真正意义上的进度条，有的文章写明是“真正意义”上的，其实也不是真正意义上，要真正意义上显示进度情况，恐怕不太现实，因为提交到，还剩多少，连机器都难于把握，因此，觉得可能性不大。 第二，我们其实也未必一定要显示进度，我倒是只想提示“提交中..”这样的效果即可，在显示提交中时，界面上其他的东西都不允许进行点击，鼠标变为“沙漏”形状，这样可以避免重复提交的可能。这似乎...
【转】页面加载等待页面JS
weixin_30485379的博客
12-27 299
加到Header下面即可 //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px...
防重复提交
qq_40184195的博客
04-16 169
1、前端加遮罩层 按键加disabled 加Boolean参数，方法调用后改为false，每次调用判断 后台在表（唯一键）或者缓存里存入请求值，若重复则不允许提交 以下为网上的方法 ：服务端session处理 思路如下： 1、在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，并在当前用户的Session域中保存这个Token。 2、将Token发送到客户端的Form表单中，在Fo...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
热门推荐
追逐梦想
03-15 5万+
最近项目中大量用到了JQuery中的Ajax异步加载数据，数据量非常大，导致每次加载的时候都感觉到非常非常慢，让客户体验非常不好，就想到用JS做一个简单的提示。 JQuery版本：1.7.1； 编写一个JS类(ck.layer.js)： /************************************* Achievo.Javascript Library ************
html 优雅好看的表单弹窗
最新发布
07-01
### 回答1： HTML优雅好看的表单弹窗是指在网页中使用HTML代码设计的一种美观且具有良好用户体验的弹出式表单窗口。 要实现一个优雅好看的表单弹窗，可以考虑以下几点： 1. 外观设计：选用合适的颜色和字体，确保与网页整体风格相协调。可以使用CSS样式对弹窗进行美化，如圆角边框、渐变背景等。 2. 布局：合理安排表单元素的位置和大小，使其排列整齐。可以使用CSS的弹性盒子布局或网格布局，以适应不同屏幕尺寸的设备。 3. 响应式设计：确保表单弹窗在不同尺寸的设备上都能正常显示和操作。可以通过使用媒体查询和响应式单位来实现自适应布局。同时，还可以使用@media规则定制不同屏幕尺寸下的样式。 4. 静态与动态效果：可以添加适当的过渡效果或动画效果，增加用户对表单弹窗的体验。例如，可以使用CSS3实现淡入淡出效果或滑动效果，或者使用JavaScript库如jQuery UI来实现更多复杂的动画效果。 5. 表单验证与反馈：对表单输入进行验证，确保用户输入的数据符合要求。可以使用HTML5表单验证属性和JavaScript进行验证，并在出现错误时提供明确的错误提示。 总之，一个优雅好看的表单弹窗需要综合考虑外观设计、布局、响应式设计、静态与动态效果以及表单验证与反馈等方面，以提供用户友好的交互体验。通过合理运用HTML、CSS和JavaScript等技术，我们可以设计出吸引人、美观实用的表单弹窗。 ### 回答2： 要创建一个优雅好看的表单弹窗，可以遵循以下几个步骤： 1. 使用HTML来构建表单弹窗的基本结构。可以使用div元素作为弹窗的容器，并设置样式来控制其位置、大小和颜色等。在弹窗内部，可以使用form元素来放置表单的各个组件。 2. 使用CSS来美化表单弹窗。可以自定义弹窗的样式，如背景颜色、边框、圆角等。还可以设置表单组件的样式，如输入框的边框、背景色、字体等。可以使用CSS动画效果来增加弹窗的过渡效果，如淡入淡出、滑动等。 3. 使用JavaScript来实现表单弹窗的交互。可以为弹窗添加打开和关闭的功能，比如点击按钮或链接时弹出表单，点击关闭按钮或背景遮罩时关闭表单。可以使用JavaScript获取表单数据，并进行验证和处理。可以通过事件监听来实现弹窗的响应，如点击弹窗外部区域关闭弹窗的功能。 4. 添加一些额外的功能，使表单弹窗更加用户友好。例如，可以为输入框添加占位符、格式化提示信息，并在表单提交时给出反馈提示。还可以添加错误提示，帮助用户更准确地填写表单内容。可以为弹窗添加拖动功能，使用户能够自由移动弹窗的位置。 总之，要创建一个优雅好看的表单弹窗，需要在HTML、CSS和JavaScript的基础上进行设计和开发，注意样式的统一性和一致性，同时提供良好的用户交互体验和反馈。 ### 回答3： HTML优雅好看的表单弹窗可以通过以下方式实现： 首先，在HTML中创建一个按钮或者其他触发弹窗事件的元素，例如一个提交按钮或者一个图片。然后，在CSS文件中设置该元素的样式，使其看起来漂亮和吸引人。可以使用自定义的背景颜色、边框样式和按钮样式等，以及过渡效果和动画效果，使其更加优雅。 接下来，在JavaScript文件中编写代码，实现点击触发的行为。可以使用事件监听器，在点击按钮或图片时，显示弹窗。可以使用DOM操作，创建一个新的元素作为弹窗容器，并设置其样式和位置。可以根据需要调整弹窗大小、位置和样式，使其适应不同设备和屏幕尺寸。 然后，在弹窗容器中创建表单元素，可以使用HTML的表单标签，如<input>、<label>、<textarea>等，来创建各种表单元素。可以使用CSS样式美化表单元素，例如调整字体样式、添加边框样式和背景颜色等，使其更加美观。 最后，在JavaScript中编写代码，处理表单的提交和关闭行为。可以使用事件监听器，监听提交按钮的点击事件，并在表单提交时执行相关的操作，如验证表单数据、发送表单数据到服务器等。可以使用按钮或者其他元素，触发关闭弹窗的行为，例如点击弹窗外部区域或者点击关闭按钮。可以通过DOM操作，从文档中移除弹窗元素，或者通过改变样式隐藏弹窗。 通过上述步骤，我们可以实现一个优雅好看的HTML表单弹窗，同时满足美观和实用的要求。当用户点击按钮或者其他触发弹窗事件的元素时，弹窗会以漂亮的方式显示，包含表单元素，用户可以输入和提交数据。而且我们可以通过JavaScript代码，对表单进行验证和处理，实现更多的功能和交互效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值