页面提交时, 弹出一个等待层

最新推荐文章于 2019-09-02 11:15:28 发布
最新推荐文章于 2019-09-02 11:15:28 发布
阅读量598 收藏
点赞数
文章标签： Microsoft
最近几个月都没有好好打理自己的博客了, 今天一看, 访问量快一万了, 在此多谢那些关照的朋友了!

还是言归正传, 请往下看:
<HTML><HEAD>
<META content="MSHTML 6.00.2800.1586" name=GENERATOR></HEAD>
<BODY><INPUT οnclick="showdiv('数据加载中<br/>请稍候... <br/> 可以试一试');" type=button value=点击这里>
<SCRIPT language=javascript type=text/javascript>
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=document.body.offsetWidth;
sHeight=document.body.offsetHeight;

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.οnclick=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);
}





</SCRIPT>
</BODY></HTML>
iteye_13469
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuex使用定时器实现等待一段时间后出现等待框（网络请求）
Android_Cob的博客
03-04 560
由于uview2.0取消了等待时间后出现等待框 使用vuex实现 //store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { timer: null }, mutations: { // 设置定时器 setTimer(state) { uni.hideLoading() clearTimeout(st.
layui layer弹窗的使用（二）
mor31的博客
06-05 598
layer是一款近年来备受青睐的web弹层组件， 作为 layui 的一个弹层模块，由于其用户基数较大，可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。 体验layer layer文档 一、两种引入方式 1、作为独立组件使用 需引入 jQuery 1.8以上的任意版本，并引入 layer.js <script src="jquery.js"></script> <script src="layer.js"></script> 2、
页面提交时出现等待窗口示例
ξσ Dicky's Blog σξ
02-17 2358
应福建一同行网友问起，抽空做了这个示例页面，实现提交页面时出现正在初始化页面的小窗口。（在页面提交比较慢的页面中使用，可以避免用户应等待时间过长而不知页面是否正在提交，以至失去耐心）页面提交时出现等待窗口示例//By Dicky 2005-2-17 11:16:49function Window_Load(Flag){ if (Flag == 0) {  document.all[Loadi
JS实现 页面提交防刷新等待提示
冯索的专栏
10-11 5448
系统使用中，常常会遇到网速过慢这样那么的情况，如果你的提交没有做验证或者特殊处理很容易造成重复提交，产生冗余数据或者系统出错。我的解决方法是，页面表单提交时，如果有等待时间，那么页面上会弹出一个提示框告诉用户系统数据正在提交，请耐心等待，同时屏蔽页面，然用户不能继续操作，从而有效方式用户重复提交。       下面就写出这个JS文件： //关闭等待窗
CSS实现的loading页面等待效果
dha1989的博客
03-31 623
http://blog.csdn.net/playboyanta123/article/details/8183731
弹出一个遮罩层有正在加载效果的文字
09-25
在网页开发中，有时我们需要在用户等待某个操作完成或数据加载时向他们展示一个提示，这时弹出一个带有“正在加载”效果的遮罩层就显得尤为重要。这种效果可以提供良好的用户体验，让用户知道系统正在进行后台处理，...
4种用法的弹出框浮动层，可拖动.rar
07-10
例如，当用户点击某个按钮触发弹出层加载数据时，Ajax可以后台请求服务器，返回数据后动态填充到弹出框内，这样用户可以看到加载过程，而不是等待整个页面刷新。 在实际应用中，开发者可能会根据项目需求对这四种弹...
jQuery实现注册和登录弹出层效果
11-11
7. **关闭弹出层**：弹出层通常有一个关闭按钮，绑定点击事件关闭弹出层，同时可以添加动画效果使关闭过程更顺畅。 8. **响应式设计**：考虑到不同设备的屏幕尺寸，弹出层应具备响应式设计，以适应手机、平板等移动...
JQuery.BlockUI 弹出层
09-24
总的来说，jQuery.BlockUI凭借其小巧的体积、丰富的功能和灵活的自定义能力，成为开发者在实现页面弹出层效果时的一个理想选择。结合适当的HTML和CSS，开发者可以轻松创建出符合项目需求的弹出层交互体验。
弹出层登录窗口ajax登录验证
04-13
标题中的“弹出层登录窗口ajax登录验证”指的是在网页设计中使用Ajax技术实现的弹出式登录窗口的验证功能。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许网页在不重新加载整个页面的...
layui执行操作的时候弹出等待框--亲测可用
u012442504的专栏
08-14 4823
一、创建事件方式 function showLoad() { return layer.msg('拼命执行中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:100000}); } function closeLoad(inde...
jquery 处理页面弹出层查询数据等待的操作(gif图片加载等待)
damaolly的专栏
08-26 8073
$(document).ready(function(){     layer.load(0); });
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
热门推荐
追逐梦想
03-15 5万+
最近项目中大量用到了JQuery中的Ajax异步加载数据，数据量非常大，导致每次加载的时候都感觉到非常非常慢，让客户体验非常不好，就想到用JS做一个简单的提示。 JQuery版本：1.7.1； 编写一个JS类(ck.layer.js)： /************************************* Achievo.Javascript Library ************
Jquery ajax 同步阻塞引起的UI线程阻塞的坑（loading图片显示不出来，layer.load延迟）
lianzhang861的博客
03-02 1万+
    今天想做一个点击地市用ajax重新获取数据刷新页面功能，因为ajax属于耗时操作，想在获取数据且加载页面时显示加载遮罩层，结果发现了ajax的好多坑。        例如如上栗子，我想点击按钮让遮罩层显示，ajax加载完毕后遮罩层消失。因为我想让loadChart()在赋值操作后执行，但如果async设为true时，往往会先执行loadChart(),之后才会赋值，所以我只能将ajax设为...
使用layer弹层完成提示消息
Angela_L的博客
09-02 5356
一.首先下载Layer 二.将下载的layer解压到jquery文件夹下 如图所示： 三.用法: 提示: layer.msg(提示信息, {time:1000, icon:5, shift:6}, 回调方法); layer.alert(提示信息, function(index){ // 回调方法 layer.close(index); ...
代码如何flask框架index.html页面提交get后等待下一个页面first.html弹出等待框
最新发布
05-31
你可以使用Flask框架提供的`render_template`函数在后端渲染HTML页面。当用户在`index.html`页面提交GET请求时，Flask框架会将请求传递给后端Python代码处理。在处理代码中，你可以使用`render_template`函数渲染`first.html`页面并添加等待框的代码。 下面是一个示例代码： ```python from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/first') def first(): # 在这里添加弹出等待框的代码 return render_template('first.html') if __name__ == '__main__': app.run() ``` 在`index.html`页面中，你需要使用HTML的`form`元素创建一个GET请求的表单，将表单的`action`属性设置为`/first`，将表单的`method`属性设置为`GET`，并添加一个提交按钮。 在`first.html`页面中，你可以使用JavaScript代码添加等待框。你可以使用Bootstrap框架提供的`Modal`组件来创建等待框。在页面加载完成时，你可以使用JavaScript代码显示等待框，并在后端处理完成后隐藏等待框。 下面是一个示例代码： ```html <!-- index.html --> <form action="/first" method="GET"> <button type="submit">提交</button> </form> <!-- first.html --> <!-- 添加等待框的代码 --> <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="loadingModalLabel">等待</h5> </div> <div class="modal-body"> <p>请稍等...</p> </div> </div> </div> </div> <script> $(document).ready(function() { $('#loadingModal').modal('show'); // 显示等待框 }); $(window).on('load', function() { $('#loadingModal').modal('hide'); // 隐藏等待框 }); </script> ``` 在上面的代码中，`loadingModal`是等待框的ID，使用`jQuery`库的`modal`函数显示和隐藏等待框。`$(document).ready()`函数在页面加载完成后执行，`$(window).on('load')`函数在页面和所有资源加载完成后执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值