JQuery版本：1.7.1；

編寫一個JS類(ck.layer.js)：

[javascript] view plaincopy

/*************************************?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遮罩一些控件(這個是我老大寫的)：

[javascript] view plaincopy

/*************************************?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類，編寫三個方法，供頁面調用：

[javascript] view plaincopy

/*************************************?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；頁面加入代碼以及自己調用大概如下：

[javascript] view plaincopy

????<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弹出层实现简单的动态提示“正在加载中，请稍等...”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。