JSP 页面保存或者提交数据时,弹出浮层防止用户在保存过程中进行其他操作

本文详细介绍了如何在使用Struts2框架处理文件上传时,通过JavaScript和HTML元素创建一个等待提示层,以提升用户体验,避免用户在上传过程中因等待而感到不适。文章重点阐述了如何在表单提交前展示一个遮罩层和进度指示器,确保在数据提交和页面跳转期间,用户界面始终保持清晰和反馈,从而减少重复提交和误操作的可能性。

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

现在做的页面,字段挺多,而且有上传文件,用的是struts2的file上传,一切就绪之后,就submit表单,上传数据

当然 关键代码

<s:form name="frmMain" theme="simple"  method="POST" enctype="multipart/form-data"> 

JS代码

document.forms[0].action = InsertCpApp.do;

document.forms[0].submit();


这样 由于数据和网络的问题,可能要等好几秒才会完全提交并跳转页面,这个过程中用户不知道在干什么,所以弹出个浮层,防止其重复提交和有其他操作

核心代码如下

<div id="hidden_div" style="left:0;top:0;margin-left:100px;margin-top:100px;
position:absolute;opacity:0.9;z-index:99;display:none;">
 <img id="logo" src="resources/images/wait.gif" alt="" />
</div> 
<div id="mask" style="position:fixed;top:0;left:0;right:0;bottom:0;
background-color:#000;opacity:0.2;z-index:98;display:none;"></div> 

两个div初始都是隐藏的,一个是提醒等待的图片,类似进度条的gif,下面的是个跟原页面大小一致的浮层,盖住原来的页面,透明度0.2

当提交的时候 在submit之前

//弹出层
document.getElementById("hidden_div").style.display = "block";
document.getElementById("mask").style.display = "block";

让这两个div显示出来。。mask盖一层,最上面是hidden_div的一层图片~~  等submit结束 页面跳转~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值