js实现页面查询弹出div隐藏背景提示进度

最新推荐文章于 2021-10-07 13:10:24 发布

戈哥

最新推荐文章于 2021-10-07 13:10:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： java

蔡蔡专属

本文链接：https://blog.youkuaiyun.com/caisenbin2009/article/details/17135985

java 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在页面加载大数据查询过程中展示进度提示的方法。通过使用Tinybox弹窗插件，可在查询过程中显示提示信息并使页面背景变灰，防止用户在此期间误操作。文章还介绍了如何设置百分比显示格式及解决jQuery符号冲突的问题。

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

{

在开始之前，补充2个另外的知识点（1.百分比格式化;2.jquery 设置$符）：

1.在页面显示的百分比数字设定为String类型-> DecimalFormat df = new DecimalFormat("##%"); 值=df.format((double)除数/被除数);

2.之前在一个页面同时使用jquery和dwr时，会出现$符冲突，作下jquery修改即可->var j$ = jQuery.noConflict(); $符全用j$代替。

}

在读取大数据查询时候，需要很多时间，我们可以给页面加提示性的进度条，也可以弹出框提示，此时页面其它地方不可点击，需要做隐藏效果，我们可以使用js的弹出框脚本控件tinybox；

我们从网上下载好tinybox.js并在页面引入js；

在页面点击按钮，需要加入超链接，赋予id属性：

 <a href="#" id="click_test"><input type="button" value="查询" onclick="query()" class="buton"></a>

点击按钮进行查询，在按钮提交前进行弹出层显示，背景变灰不可操作：

document.queryform.action='query.action';
		
		var content = "页面数据正在查询中，请稍候。。。";//弹出层自动消失
        T$('click_test').onclick = function(){TINY.box.show(content,0,0,0,0,0)};
        
		document.queryform.submit();

（TINY.box.show 6个参数，第一个是要显示的 AJAX 或 HTML 内容。第二个是设置是否为 AJAX。第三个是宽度，0 为自动。第四个是高度，0 为自动。第五个是是否设置隐藏，第六个则是设置是否自动隐藏的时间。）
显示效果如下：