JQuery版本:1.7.1;

编写一个JS类(ck.layer.js):

[javascript] view plaincopy
  1. /************************************* Achievo.Javascript Library **************************
  2. * Using jQuery 1.7.1
  3. * Using cks.js 1.0.1
  4. * Name : ck.layer.js
  5. * Create by Angle.Yang on 2012/03/07 [V1.0.0]
  6. *******************************************************************************************/
  7. (function ($) {
  8. $.fn.masklayer = function (settings) {
  9. /// <summary>
  10. /// 模态窗口,继承 easy-ui.window
  11. /// </summary>
  12. /// <param name="settings" type="object">扩展了{title:[div中的内容], action:[执行的动作,目前支持"close"], result:[返回结果]}</param>
  13. /// <returns type="void" />
  14. settings = $.extend(true, { title: '加载中...', action: "open" }, settings);
  15. /// <summary>
  16. /// 初始化所有 cks 样式的按钮(页面运行时进行初始化)
  17. /// </summary>
  18. /// <returns type="void" />
  19. _init = function () {
  20. if (settings.action == "open") {
  21. if ($("#div_load").length == 0) {
  22. var boardDiv = "<div id='div_load'><\/div>";
  23. $(document.body).append(boardDiv);
  24. }
  25. if ($("#div_load").length > 0) {
  26. $("#div_load").fix_ie6Select();
  27. $("#div_load").css("display", "block");
  28. $("#div_load").css("height", document.body.offsetHeight);
  29. $("#div_load").html(settings.title);
  30. }
  31. }
  32. else if (settings.action == "close") {
  33. if ($("#div_load").length > 0) $("#div_load").css("display", "none");
  34. }
  35. else if (settings.action = "setTitle") {
  36. if ($("#div_load").length > 0) $("#div_load").html(settings.title);
  37. else {
  38. var boardDiv = "<div id='div_load'>" + settings.title + "<\/div>";
  39. $(document.body).append(boardDiv);
  40. $("#div_load").fix_ie6Select();
  41. $("#div_load").css("display", "block");
  42. $("#div_load").css("height", document.body.offsetHeight);
  43. }
  44. }
  45. };
  46. return (function () { _init() })();
  47. };
  48. })(jQuery);

$("#div_load").fix_ie6Select(); 这句调用另一个JS,主要作用是兼容IE6遮罩一些控件(这个是我老大写的):

[javascript] view plaincopy
  1. /************************************* Achievo.Javascript Library **************************
  2. * Using jQuery 1.7.1
  3. * Using cks.js 1.0.2
  4. * Name : ck.fixer.js
  5. * Create by Toky on 2012/02/14 [V1.0.0]
  6. *******************************************************************************************/
  7. (function ($) {
  8. $.fn.fix_ie6Select = function () {
  9. /// <summary>
  10. /// 兼容弹出层在 IE6 下不能掩盖 Select
  11. /// </summary>
  12. /// <returns type="void" />
  13. return this.each(function (index) {
  14. var frm = $(this).find('iframe[tag*="ie6Selector"]');
  15. if (cks.browser.IE6) {
  16. var w = $(this).width();
  17. var h = $(this).height();
  18. if (frm.length == 0) {
  19. $(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>');
  20. }
  21. else {
  22. frm.css("width", w);
  23. frm.css("height", h);
  24. }
  25. }
  26. });
  27. };
  28. })(jQuery);

在编写一个JS类,编写三个方法,供页面调用:

[javascript] view plaincopy
  1. /************************************* layer.class Javascript Library  ***************************
  2. * Using jQuery 1.7.1
  3. * Version : 1.0.0
  4. * Name : layer.class.js
  5. * Create by Angle.Yang on 2012/03/07
  6. *******************************************************************************************/
  7. $.extend({
  8. layer: {
  9. name: "layer.class.js",
  10. globalVar: {}, // 内部变量, 外部不得使用(document.body 未初始化时使用;内部变量)
  11. setMaskTitle: function (title) {
  12. /// <summary>
  13. /// 修改遮罩层的内容 Angle.Yang 2012.03.07 16:35 Add
  14. /// </summary>
  15. /// <param name="title" type="string">遮罩层中的提示信息</param>
  16. /// <returns type="void" />
  17. $.fn.masklayer({ title: title, action: "setTitle" });
  18. },
  19. openMask: function (title) {
  20. /// <summary>
  21. /// 显示遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
  22. /// </summary>
  23. /// <param name="title" type="string">遮罩层中的提示信息</param>
  24. /// <returns type="void" />
  25. $.fn.masklayer({ title: title, action: "open" });
  26. },
  27. closeMask: function () {
  28. /// <summary>
  29. /// 关闭遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
  30. /// </summary>
  31. /// <returns type="void" />
  32. $.fn.masklayer({ action: "close" });
  33. }
  34. }
  35. });
  36. cks.using("kits/ck.layer.js");
  37. 编写我们的页面,引用JQuery(1.7.1)版本,引用layer.class.js;页面加入代码以及自己调用大概如下:

    [javascript] view plaincopy
    1. <script src="../js/jquery.js" type="text/javascript"></script>
    2. <script src="../js/layer.class.js" type="text/javascript"></script>
    3. <script type="text/javascript" language="javascript">
    4. function GetDataSource() {
    5. layer.openMask("数据提交中,请稍等..."); //开始给出提示
    6. $.ajax({
    7. url: s.url + "&FormControlID=" + obj.id,
    8. async: true,
    9. cache: false,
    10. contentType: "text/xml; charset=\"utf-8\"",
    11. data: {},
    12. dataType: "xml",
    13. type: "Post",
    14. success: function (xml, textStatus, jqXHR) {
    15. layer.setMaskTitle("数据返回加载中..."); //中间修改提示文本
    16. //执行相关代码
    17. },
    18. complete: function (jqXHR, textStatus) {
    19. layer.closeMask(); //执行完关闭
    20. }
    21. });
    22. }
    23. </script>

转载于:https://www.cnblogs.com/lengzhijun/p/4699827.html

利用JS弹出层实现简单的动态提示“正在加载中,请稍等...”相关推荐

  1. 利用JS弹出层实现简单的动态提示“正在加载中,请稍等...

    最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...

  2. php提交表单关闭弹出层,使用js实现关闭js弹出层的窗口

    本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 function toggle() { theObj = document.getE ...

  3. html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...

  4. html 关闭页面回调,popup.js弹出层回调关闭

    效果如下: 父页面father,弹出层页面son,点击son.html的关闭按钮,关闭弹窗.采用popup.js弹窗插件. //弹出层 var pop; function ShowIframe(){ ...

  5. js弹出一段html,html js 弹出层

    弹出层―到浏览器中央―背景变暗:前端思考请猛击我(我会弹到中间,同时背景变暗) 弹出层标题栏 这里是弹出层内容,内容可以是文字.图片等,可以是iframe传进来,也可以用jQuery的load()传进 ...

  6. 移动端 js 弹出层内容滚动的时候,不影响body的滚动条处理

    如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: <!DOCTYPE HTML&g ...

  7. 利用 JS 判断页面图片静态资源链接是否有效是否加载完成

    文章目录 一.功能说明 二.动图效果展示 三.完整源代码 一.功能说明 利用原生 JS 实现对图片静态资源链接是否有效进行判断: 如果资源链接有效,直接渲染: 如果资源链接失效,3秒后替换新的链接,进 ...

  8. swiper 弹出图片_结合swiper使用图片懒加载

    记录下笔记,大神勿喷,可以留下优化建议,谢谢 最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个 ...

  9. js 弹出层的点击事件影响到底层的点击事件_聊一聊 Node.js 错误处理

    个人博客:https://blog.skrskrskrskr.com 错误分类 软件程序中,我们可以将错误大致分为外部错误和内部错误两大类. 外部错误是正确编写的程序在运行时产生的错误.它并不是程序本 ...

最新文章

  1. linux 存储映射lun 给_在Linux中针对物理磁盘和LUN映射Oracle ASM磁盘
  2. 观点|基础模型产业发展路在何方?李飞飞等共话基础模型未来趋势
  3. easyui中的datagrid的数据加载的问题
  4. NASM在Ubuntu上的安装与简单使用
  5. ssh主机之间建立互信 --免密码
  6. SAP CRM呼叫中心工具栏按钮的渲染逻辑 - 缺CSDN
  7. iOS API离线文档下载和查阅
  8. okhttp 工具类_日语学习工具推荐,小白必备!
  9. Linux基础介绍【第五篇】
  10. mysql找不到服务_win7系统安装mysql后找不到服务或提示找不到指定文件如何解决...
  11. bat 命令返回结果_【批处理】带你入门命令行
  12. 股票成交量和价格关系
  13. 【离散数学】第二章 笔记(完)
  14. Intel IPP密码库 IPPCP 2018——第二部分 对称密码算法开发说明与示例代码
  15. Linux系统下安装wgrib2
  16. LQR控制器——简单实现与仿真
  17. JAVA开发运维(云基础设备监控)
  18. 在电脑测试c语言编程,C语言电脑编程兴趣班测试题目
  19. 查询有2门及以上不及格科目的学生姓名及其平均成绩
  20. 我爬了商圈百晓生花爷的星球,都是些什么样的大佬花友!

热门文章

  1. android 最新usb驱动程序下载,安卓手机USB驱动官方下载、安装教程
  2. android 情景感知 sdk,情景感知服务
  3. python测试代码运行时间_10种检测Python程序运行时间、CPU和内存占用的方法
  4. 求两条轨迹间的hausdorff距离_带电粒子在平行板电容器极板间的运动知识点
  5. 007_Vue style样式绑定
  6. groovy oracle数据库,使用Groovy /搖籃到用什麼驅動程序連接到Oracle數據庫
  7. webapi添加html页面,如何从WebApi动作返回html页面?
  8. spring日志报错提醒_Spring Boot 2.x : 整合日志框架 Log4j2
  9. shell day01 : Shell概述 编写及执行脚本 、 Shell变量
  10. 用ftp、http搭建网络yum源