在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层 |
您所在的位置：网站首页 › html弹出层代码 › 在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层 |
在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层
|
在项目中可能会有一些数据量较大的信息作提交，添加，修改等操作等待时间较长， 这样就会有需求就是提示一下，给用户更好的体验感 使用到的技术：thymeleaf 也可不使用thymeleaf，在文章中代码把相关的信息删除就可以 这个地方先看html中的代码片段 有一个submit按钮做提交操作 下边是引入一个loading图片，显示在遮罩层中，图片可以从网上下载，可以是gif、pig的 还有一句提示的信息 不要进行别的操作,请稍后……其次就要设置遮罩层的样式，也就是上面代码片段中的span标签中的class标签 .loadingcss{ height: 30%; width: 30%; position:absolute; left: 40%; top: 37%; background-color: rgba(0,0,0,0.4);/*显示遮罩层背景颜色和透明度*/ /*如果上边的效果不理想可以分开实现背景颜色的透明度,背景颜色和透明度可自行调节*/ /* background-color: #ccc; filter:alpha(Opacity=80);-moz-opacity: 0.5;opacity: 0.5; */ }最后就是显示效果，点击提交出现遮罩层 首先需要在文档就绪函数中加上隐藏字段（使用的ID选择器就是上边代码片段中的span标签中的ID） $(function(){ $("#loading").hide(); });其次 可以解决点击提交按钮出现遮罩层 可以解决提交按钮多次重复提交问题，在这里使用到的是ajax提交 在ajax中添加 beforeSend:function(XMLHttpRequest){ var winNode = $("#loading"); //使遮罩层显示方法 winNode.show(); //解决按钮重复提交 $("#hiddent").removeAttr("onclick"); },提交完成之后可以选择跳转到新的页面，然后就不需要管遮罩层的显示问题 最后看一下实现的效果图： |
总结：以上就是我的解决方案，记录一下，如果有不对的地方，请指正。【本文地址】
今日新闻 |
推荐新闻 |