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

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>