开发过程常遇到在导入数据或者需要页面跳转的时，希望有一个提示效果。用的地方多了，就整理了一个，或许你也需要哦
var m = "mask";
var _id = "pop";
//给提示对话框设置大小
var newDivHeight = 20;
function show(info) {
openMaskDiv();
openNewDiv(info);
}
//判断div是否已经创建
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
//mask遮罩层
function openMaskDiv() {
if (docEle(m))
document.body.removeChild(docEle(m));
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
//遮罩层的宽度和高度
var _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
newMask.style.width = "100%";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#AAAAAA";
newMask.style.filter = "alpha(opacity=60)";
newMask.style.opacity = "0.30";
document.body.appendChild(newMask);
}
//新弹出层
function openNewDiv(info) {
if (docEle(_id))
document.body.removeChild(docEle(_id));
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "auto";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = "50%";
newDiv.style.left = "45%";
newDiv.style.textAlign = "center";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #AAA";
newDiv.style.padding = "5px";
newDiv.innerHTML = "<img src='images/loading.gif'/> "+info;
document.body.appendChild(newDiv);
//页面手动关闭
//close();
//可设置10秒后关闭提示
setTimeout(auto_close,10000);
}
//关闭新图层和mask遮罩层
function close() {
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "close";
newA.onclick = function() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
function auto_close() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mask.js" charset="utf-8"></script>
</head>
<body>
<input type="button" onclick="show('正在同步...');" value="pop"></button></br>
this is test page;</br>
this is test page;</br>
this is test page;</br>
this is test page;</br>
this is test page;</br>
this is test page;</br>
this is test page;</br>
this is test page;</br>
</body>
</html>
相关推荐
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
源代码-BASISBBS最易ASP论坛 v1.0.7.zip
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
华为大模型 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks
【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】
顾客满意度调查表.doc
Excel模板个人简历优雅简约单页30.docx
响应式web前段开发程序一书的所有源代码，PPT，课件，免费不要钱，有需要的下载即可，我是好人！给我点赞，让更多的大学生看见，大学生help大学生！
HC400-20标定版描述文件及标定版ps文件
【备注】 1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通。 2.主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感，也欢迎你的分享和反馈！ 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip
【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别（带面板）【含Matlab源码 1771期】
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
STM32F103
Spring Boot 是一个开源的 Java 框架，用于简化 Spring 应用程序的初始搭建以及开发过程。它提供了许多默认配置，使得开发者能够更快速地构建应用。以下是一些 Spring Boot 的开发案例，这些案例展示了如何使用 Spring Boot 来构建不同类型的应用程序。 Web 应用程序： 博客系统：可以使用 Spring Boot 创建一个简单的博客系统，包括用户注册、登录、发布文章、评论等功能。利用 Spring Boot 的自动配置特性，可以快速搭建起一个 Web 服务器，并通过 Spring MVC 实现 RESTful API。 在线商店：Spring Boot 可以用来构建电商网站，包括商品展示、购物车、订单处理、支付集成等功能。
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
从交易模式看游戏陪玩平台的运行逻辑（一）.docx
产品属性检验记录表（注塑）.xls
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
项目背景： 校园二手交易网站旨在为学生提供一个便捷、安全的二手物品交易平台，促进资源循环利用，减轻学生经济负担。通过SpringBoot和Maven技术栈，构建一个高效、易维护的二手交易网站。 项目目标： 搭建一个功能齐全的二手交易平台，方便学生发布和浏览二手商品信息。 提供安全的用户认证和交易保护机制，确保交易的可靠性和安全性。 实现简洁美观的用户界面，提升用户体验。 主要功能： 用户管理：支持用户注册、登录、信息修改和账户管理。 商品发布与管理：用户可以发布、编辑、删除自己的二手商品信息，并查看其他用户发布的商品。 商品搜索与分类：支持按关键词、类别和价格范围等条件搜索商品，方便用户快速找到所需物品。 消息通知：提供买卖双方的消息通知和交流功能，促进交易沟通。 交易记录：记录用户的交易历史，方便用户查看和管理交易信息。 技术实现： 后端开发：使用SpringBoot框架构建后端服务，处理用户认证、商品管理和交易记录等功能。 前端开发：使用Thymeleaf模板引擎和Bootstrap框架开发用户界面，实现响应式设计和良好的用户体验。 数据持久化：使用MySQL数据库存储用