利用JS弹出层实现简单的动态提示“正在加载中,请稍等...”
JQuery版本:1.7.1;
编写一个JS类(ck.layer.js):
- /************************************* Achievo.Javascript Library **************************
- * Using jQuery 1.7.1
- * Using cks.js 1.0.1
- * Name : ck.layer.js
- * Create by Angle.Yang on 2012/03/07 [V1.0.0]
- *******************************************************************************************/
- (function ($) {
- $.fn.masklayer = function (settings) {
- /// <summary>
- /// 模态窗口,继承 easy-ui.window
- /// </summary>
- /// <param name="settings" type="object">扩展了{title:[div中的内容], action:[执行的动作,目前支持"close"], result:[返回结果]}</param>
- /// <returns type="void" />
- settings = $.extend(true, { title: '加载中...', action: "open" }, settings);
- /// <summary>
- /// 初始化所有 cks 样式的按钮(页面运行时进行初始化)
- /// </summary>
- /// <returns type="void" />
- _init = function () {
- if (settings.action == "open") {
- if ($("#div_load").length == 0) {
- var boardDiv = "<div id='div_load'><\/div>";
- $(document.body).append(boardDiv);
- }
- if ($("#div_load").length > 0) {
- $("#div_load").fix_ie6Select();
- $("#div_load").css("display", "block");
- $("#div_load").css("height", document.body.offsetHeight);
- $("#div_load").html(settings.title);
- }
- }
- else if (settings.action == "close") {
- if ($("#div_load").length > 0) $("#div_load").css("display", "none");
- }
- else if (settings.action = "setTitle") {
- if ($("#div_load").length > 0) $("#div_load").html(settings.title);
- else {
- var boardDiv = "<div id='div_load'>" + settings.title + "<\/div>";
- $(document.body).append(boardDiv);
- $("#div_load").fix_ie6Select();
- $("#div_load").css("display", "block");
- $("#div_load").css("height", document.body.offsetHeight);
- }
- }
- };
- return (function () { _init() })();
- };
- })(jQuery);
$("#div_load").fix_ie6Select(); 这句调用另一个JS,主要作用是兼容IE6遮罩一些控件(这个是我老大写的):
- /************************************* Achievo.Javascript Library **************************
- * Using jQuery 1.7.1
- * Using cks.js 1.0.2
- * Name : ck.fixer.js
- * Create by Toky on 2012/02/14 [V1.0.0]
- *******************************************************************************************/
- (function ($) {
- $.fn.fix_ie6Select = function () {
- /// <summary>
- /// 兼容弹出层在 IE6 下不能掩盖 Select
- /// </summary>
- /// <returns type="void" />
- return this.each(function (index) {
- var frm = $(this).find('iframe[tag*="ie6Selector"]');
- if (cks.browser.IE6) {
- var w = $(this).width();
- var h = $(this).height();
- if (frm.length == 0) {
- $(this).prepend('<iframe tag="ie6Selector" src="" frameborder="no" marginwidth="0" marginheight="0" style="border:none;position:absolute;visibility:inherit;top:0px;left:0px;width:' + w + 'px;height:' + h + 'px;z-index:-1;"></iframe>');
- }
- else {
- frm.css("width", w);
- frm.css("height", h);
- }
- }
- });
- };
- })(jQuery);
在编写一个JS类,编写三个方法,供页面调用:
- /************************************* layer.class Javascript Library ***************************
- * Using jQuery 1.7.1
- * Version : 1.0.0
- * Name : layer.class.js
- * Create by Angle.Yang on 2012/03/07
- *******************************************************************************************/
- $.extend({
- layer: {
- name: "layer.class.js",
- globalVar: {}, // 内部变量, 外部不得使用(document.body 未初始化时使用;内部变量)
- setMaskTitle: function (title) {
- /// <summary>
- /// 修改遮罩层的内容 Angle.Yang 2012.03.07 16:35 Add
- /// </summary>
- /// <param name="title" type="string">遮罩层中的提示信息</param>
- /// <returns type="void" />
- $.fn.masklayer({ title: title, action: "setTitle" });
- },
- openMask: function (title) {
- /// <summary>
- /// 显示遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
- /// </summary>
- /// <param name="title" type="string">遮罩层中的提示信息</param>
- /// <returns type="void" />
- $.fn.masklayer({ title: title, action: "open" });
- },
- closeMask: function () {
- /// <summary>
- /// 关闭遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
- /// </summary>
- /// <returns type="void" />
- $.fn.masklayer({ action: "close" });
- }
- }
- });
- cks.using("kits/ck.layer.js");
编写我们的页面,引用JQuery(1.7.1)版本,引用layer.class.js;页面加入代码以及自己调用大概如下:
- <script src="../js/jquery.js" type="text/javascript"></script>
- <script src="../js/layer.class.js" type="text/javascript"></script>
- <script type="text/javascript" language="javascript">
- function GetDataSource() {
- layer.openMask("数据提交中,请稍等..."); //开始给出提示
- $.ajax({
- url: s.url + "&FormControlID=" + obj.id,
- async: true,
- cache: false,
- contentType: "text/xml; charset=\"utf-8\"",
- data: {},
- dataType: "xml",
- type: "Post",
- success: function (xml, textStatus, jqXHR) {
- layer.setMaskTitle("数据返回加载中..."); //中间修改提示文本
- //执行相关代码
- },
- complete: function (jqXHR, textStatus) {
- layer.closeMask(); //执行完关闭
- }
- });
- }
- </script>
转载于:https://www.cnblogs.com/lengzhijun/p/4699827.html
利用JS弹出层实现简单的动态提示“正在加载中,请稍等...”相关推荐
- 利用JS弹出层实现简单的动态提示“正在加载中,请稍等...
最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...
- php提交表单关闭弹出层,使用js实现关闭js弹出层的窗口
本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 function toggle() { theObj = document.getE ...
- html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...
- html 关闭页面回调,popup.js弹出层回调关闭
效果如下: 父页面father,弹出层页面son,点击son.html的关闭按钮,关闭弹窗.采用popup.js弹窗插件. //弹出层 var pop; function ShowIframe(){ ...
- js弹出一段html,html js 弹出层
弹出层―到浏览器中央―背景变暗:前端思考请猛击我(我会弹到中间,同时背景变暗) 弹出层标题栏 这里是弹出层内容,内容可以是文字.图片等,可以是iframe传进来,也可以用jQuery的load()传进 ...
- 移动端 js 弹出层内容滚动的时候,不影响body的滚动条处理
如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: <!DOCTYPE HTML&g ...
- 利用 JS 判断页面图片静态资源链接是否有效是否加载完成
文章目录 一.功能说明 二.动图效果展示 三.完整源代码 一.功能说明 利用原生 JS 实现对图片静态资源链接是否有效进行判断: 如果资源链接有效,直接渲染: 如果资源链接失效,3秒后替换新的链接,进 ...
- swiper 弹出图片_结合swiper使用图片懒加载
记录下笔记,大神勿喷,可以留下优化建议,谢谢 最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个 ...
- js 弹出层的点击事件影响到底层的点击事件_聊一聊 Node.js 错误处理
个人博客:https://blog.skrskrskrskr.com 错误分类 软件程序中,我们可以将错误大致分为外部错误和内部错误两大类. 外部错误是正确编写的程序在运行时产生的错误.它并不是程序本 ...
最新文章
- linux 存储映射lun 给_在Linux中针对物理磁盘和LUN映射Oracle ASM磁盘
- 观点|基础模型产业发展路在何方?李飞飞等共话基础模型未来趋势
- easyui中的datagrid的数据加载的问题
- NASM在Ubuntu上的安装与简单使用
- ssh主机之间建立互信 --免密码
- SAP CRM呼叫中心工具栏按钮的渲染逻辑 - 缺CSDN
- iOS API离线文档下载和查阅
- okhttp 工具类_日语学习工具推荐,小白必备!
- Linux基础介绍【第五篇】
- mysql找不到服务_win7系统安装mysql后找不到服务或提示找不到指定文件如何解决...
- bat 命令返回结果_【批处理】带你入门命令行
- 股票成交量和价格关系
- 【离散数学】第二章 笔记(完)
- Intel IPP密码库 IPPCP 2018——第二部分 对称密码算法开发说明与示例代码
- Linux系统下安装wgrib2
- LQR控制器——简单实现与仿真
- JAVA开发运维(云基础设备监控)
- 在电脑测试c语言编程,C语言电脑编程兴趣班测试题目
- 查询有2门及以上不及格科目的学生姓名及其平均成绩
- 我爬了商圈百晓生花爷的星球,都是些什么样的大佬花友!
热门文章
- android 最新usb驱动程序下载,安卓手机USB驱动官方下载、安装教程
- android 情景感知 sdk,情景感知服务
- python测试代码运行时间_10种检测Python程序运行时间、CPU和内存占用的方法
- 求两条轨迹间的hausdorff距离_带电粒子在平行板电容器极板间的运动知识点
- 007_Vue style样式绑定
- groovy oracle数据库,使用Groovy /搖籃到用什麼驅動程序連接到Oracle數據庫
- webapi添加html页面,如何从WebApi动作返回html页面?
- spring日志报错提醒_Spring Boot 2.x : 整合日志框架 Log4j2
- shell day01 : Shell概述 编写及执行脚本 、 Shell变量
- 用ftp、http搭建网络yum源