JS实现 页面提交防刷新等待提示
//关闭等待窗口
function closediv() {
//Close Div
document.body.removeChild(document.getElementById("bgDiv"));
document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));
document.body.removeChild(document.getElementById("msgDiv"));
}
//显示等待窗口
function showdiv(str) {
var msgw, msgh, bordercolor;
msgw = 400; //提示窗口的宽度
msgh = 100; //提示窗口的高度
bordercolor = "#336699"; //提示窗口的边框颜色
titlecolor = "#99CCFF"; //提示窗口的标题颜色 var sWidth, sHeight;
sWidth = window.screen.availWidth;
sHeight = window.screen.availHeight; var bgObj = document.createElement("div");
bgObj.setAttribute('id', 'bgDiv');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#777";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
document.body.appendChild(bgObj);
var msgObj = document.createElement("div")
msgObj.setAttribute("id", "msgDiv");
msgObj.setAttribute("align", "center");
msgObj.style.position = "absolute";
msgObj.style.background = "white";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
msgObj.style.left = (sWidth - msgw) / 2 + "px";
var title = document.createElement("h4");
title.setAttribute("id", "msgTitle");
title.setAttribute("align", "right");
title.style.margin = "0";
title.style.padding = "3px";
title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";
title.style.border = "1px solid " + bordercolor;
title.style.height = "18px";
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color = "white";
//title.style.cursor = "pointer";
//title.innerHTML = "关闭";
//title.onclick = closediv;
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt = document.createElement("p");
txt.style.margin = "1em 0"
txt.setAttribute("id", "msgTxt");
txt.innerHTML = str;
document.getElementById("msgDiv").appendChild(txt);
}
//屏蔽F5
document.onkeydown = mykeydown;
function mykeydown() {
if (event.keyCode == 116) //屏蔽F5刷新键
{
window.event.keyCode = 0;
return false;
}
}
使用页面直接调用这个js文件,然后在按钮的onclick事件中填写:
<INPUT onclick="showdiv('表达数据提交中<br/>请稍候........ <br/> );" type="button" value="提交数据">
调用closediv()关闭
JS实现 页面提交防刷新等待提示的更多相关文章
- 竖向折叠二级导航JS代码(可防刷新ul/li结构)
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- ExtJs 4中 Ext.Ajax.request提交实现waitMsg等待提示效果
//submitForm为form表单 var myMask = new Ext.LoadMask(Ext.getBody(),{msg:"请稍等,正在导入..."}); myMa ...
- js实现操作等待提示loading……
js实现操作等待功能,防止重复提交,界面友好,底部为灰色遮罩层,防止用户重复操作. 先看效果图: 接着看js代码: //关闭等待窗口 function closeWaiting() { var b ...
- JS 重载页面,本地刷新,返回上一页
JS 重载页面,本地刷新,返回上一页 : <a href="javascript:history.go(-1)">返回上一页</a> <a href= ...
- form表单提交数据,页面必定会刷新,ajax提交数据不会刷新,做到悄悄提交,多选删除,ajax提交实例
很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
- JS实现页面刷新方法
下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- js中页面刷新和页面跳转的方法总结
.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...
- js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]
.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...
随机推荐
- appium 调试问题--UiAutomator died while responding to command
运行程序问题: 解决办法: 手机系统版本较低导致,我是V4.2.2,在android 4.3 系统上运行正常 代码如下: #coding=utf-8 ''' 作者:xxx 功能:测试计算器基本功能 注 ...
- poj 1470 Closest Common Ancestors LCA
题目链接:http://poj.org/problem?id=1470 Write a program that takes as input a rooted tree and a list of ...
- Java 函数参数传递方式详解 分类: Java Game 2014-08-15 06:34 82人阅读 评论(0) 收藏
转:http://zzproc.iteye.com/blog/1328591 在阅读本文之前,根据自己的经验和理解,大家可以先思考并选择一下Java函数的参数传递方式: A. 是按值传递的? B. ...
- 2012 Asia Chengdu Regional Contest
Browsing History http://acm.hdu.edu.cn/showproblem.php?pid=4464 签到 #include<cstdio> #include&l ...
- extjs4与ckeditor、ckfinder整合
<script type="text/javascript"src="<?php echo Yii::app()->request->baseUr ...
- Post 的数据被截断
原因: Form 域 POST 提交数据 100K(可能不是这个值) 限制的解决方案 因为微软这个限制是对表单内每个域(第一个控件)的限制.问题的解决办法是,对于一个需要发送大数据的域,在提交表单 ...
- awk 统计数据在文件中的出现次数
突然发现awk原来可以统计同一数据在要处理的文件中所出现的次数.原来的时候为了分析数据还自己写程序,哎,无语,当时还以为自己多强,手工分析不过来的东西写程序处理.现在想来实在是年少轻狂.解决问题嘛,不 ...
- 用fabric部署维护kle日志收集系统
最近搞了一个logstash kafka elasticsearch kibana 整合部署的日志收集系统.部署参考lagstash + elasticsearch + kibana 3 + kafk ...
- CentOS 6下安装nginx
原文:http://yubosun.akhtm.com/tech/centos-nginx.htm 1 在nginx官方网站下载一个rpm包,下载地址是:http://nginx.org/en/dow ...
- 安装WINCC6.0的步骤
安装WINCC6.0/6.2的步骤 (XP不能是HOME版的!!!) 1. 首先安装SQL FOR WINCC6.0/6.2这个软件(如果你的系统已安装此软件相关版本可能提示安装失败请卸载后再重 ...