废话不多说,直接上代码。

首先是HTML中层的实现:

<!-- loading 层 -->
<div id="loadingDivBack" style="display: none; position: absolute; top: 0; left: 0; width: 100%; op: 0; background: #eeeeee; opacity: 0.7; filter: alpha(opacity=30); z-index: 100;"></div>
<div id="loadingDiv" style="display: none; position: absolute; cursor1: wait; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; z-index: 101; background: #fff url(/img/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family: \'Microsoft YaHei\'; ">正在提交,请等待...</div>

里面的各项参数可以自己调整,需要说明的是两个层都是绝对位置,并且loadingDiv的z-index比蒙版层的要大。

下面是调用这个loading的js代码:

 function showLoading() {
var _PageHeight = $(document).height();//document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)
var _LoadingTop = $(document).scrollTop() + document.documentElement.clientHeight / 2;//折叠高度+1/2浏览器高度得到当前视图中间
_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
$("#loadingDivBack").height(_PageHeight);
$("#loadingDiv").css("left", _LoadingLeft + "px");
$("#loadingDiv").css("top", _LoadingTop + "px");
$("#loadingDivBack").show();
$("#loadingDiv").show();
}

调用的时候通常是在点击某个submit的button的click事件里面。例如:

 $("#btn_submit").click(function () {
//弹出模态loading层,让其它按钮不可用
showLoading();
$.ajax({...

效果图

带蒙版的提交loading页面实现的更多相关文章

  1. 页面提交错误,页面间参数传递java.lang.NumberFormatException: null

    多次出现这样的错误,在点击一个按钮触发提交整个页面的事件时,总是报错,不止一次出现这样的错误了. 出现这种问题的分析: 1 我们从这个问题的本身来看,java.lang.NumberFormatExc ...

  2. original.txt和提交的页面输出的文字的混合文件

    如果从准确的角度来说,那PHP文档是最准确的,因为它很简练的列出了实现文本类文件触发下载所需要的三条语句,以PDF为例就是: 代码如下:// We'll be outputting a PDF hea ...

  3. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  4. 禅道项目管理软件 为提交Bug页面添加“优先级”字段

    为提交Bug页面添加“优先级”字段 by:授客 QQ:1033553122 测试环境: 禅道项目管理软件7.1.stable版本 备注:仅适合windows版本,linux下,直接在页面管理后台安装官 ...

  5. flutter 延时函数delay Loading页面

    loading 页面 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Lo ...

  6. WPF 实现带蒙版的 MessageBox 消息提示框

    WPF 实现带蒙版的 MessageBox 消息提示框 WPF 实现带蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文链接: https://github.com ...

  7. 用手机自带uc浏览器查看静态页面,css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  8. ajax 提交成功页面跳转问题

    jsx/ajax提交成功后采用以下方式跳转:1.本页面跳转:"window.location.href"."location.href" 2.上一层页面跳转:& ...

  9. 表单提交---前端页面模拟表单提交(form)

    有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认 ...

随机推荐

  1. py-faster-rcnn几个辅助脚本

    py-faster-rcnn本身代码很棒. 不过使用它的时候,还是需要自己写一些脚本,作为辅助. 1 所有.py文件顶部添加utf8编码声明.因为有时候需要添加中文注释,不声明编码会报错 #inser ...

  2. springboot: mybatis集成参考

    http://blog.csdn.net/isea533/article/details/50359390

  3. 《Just for Fun》读后感

    这本书有一个长长的中文名字:<只是为了好玩:Linux之父林纳斯自传>,所以博客标题我就用英文书名了. 读罢此书,不禁想起一位长者的名言:“一个人的成功当然要靠自我奋斗,但也要考虑历史的进 ...

  4. UVA1225

    每增加1个整数,所有位上的对应数都加一.建立一个10000列10行的表,然后查表就可以了. #include<stdio.h> #include<string.h> ][]; ...

  5. Active Record 数据迁移

    1.创建controler: welcome ;action: index $ rails generate controller welcome index 2.创建名为Article的model定 ...

  6. [asp.net core]定义Tag Helpers

    原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring Getting started wi ...

  7. iOS多线程-RunLoop简介

    什么是RunLoop? 从字面上来看是运行循环的意思. 内部就是一个do{}while循环,在这个循环里内部不断的处理各种任务(比如:source/timer/Observer) RunLoop的存在 ...

  8. html div 添加链接

    <html> <body> <a href="http://www.w3school.com.cn/" target="_blank&quo ...

  9. BOM 浏览器对象模型

    总结自JavaSript高级编程

  10. bzoj4314

    首先,我们考虑原题取消k的限制后怎么做. 设(xy)是一个n次单位根,f(x)=(1+x^0)*(1+x^1)*(1+x^2)*...*(1+x^n-1) 参见 http://bx2k.is-prog ...