CSS制作提示框 ‘正在加載請。。。。?!?/h1>
發(fā)布時間:2017-09-14 09:50:08 作者:佚名
我要評論
最近做項目遇到這樣的需求,頁面加載數(shù)據(jù)比較慢,一直沒有反應(yīng),下面小編給大家?guī)砹嘶贑SS制作提示框 ‘正在加載請。。。。。’功能,需要的朋友參考下吧
需求:
有時加載數(shù)據(jù)比較慢,頁面一直沒有反應(yīng),用戶也許會不停的刷,而且用戶體驗也不好
解決:
在js中加入以下代碼即可
//提示信息
function AddRunningDiv() {
$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在處理,請耐心等待...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 });
}
//取消提示信息
function MoveRunningDiv() {
$("div[class='datagrid-mask']").remove();
$("div[class='datagrid-mask-msg']").remove();
}
在需要的地方調(diào)用即可。
效果如下:整個頁面不可編輯
總結(jié)
以上所述是小編給大家介紹的CSS制作提示框 ‘正在加載請。。。。。’,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章

純CSS3實現(xiàn)的多層圓環(huán)loading加載動畫特效源碼
是一款實現(xiàn)了多圓環(huán)同時旋轉(zhuǎn)的多層圓環(huán)loading加載動畫特效,非常有意思,大家可以自行替換顏色,適應(yīng)于絕大多數(shù)的網(wǎng)站使用,歡迎有興趣的朋友們前來下載使用 2018-01-19 
純CSS3實現(xiàn)帶有衛(wèi)星軌道旋轉(zhuǎn)效果的加載動畫特效源碼
這是一款基于純CSS3實現(xiàn)帶有衛(wèi)星軌道旋轉(zhuǎn)效果的加載動畫特效源碼。畫面上有三個顏色各異且相互獨立的弧線在各自的軌道上旋轉(zhuǎn),整體呈現(xiàn)出軌道衛(wèi)星動畫的加載視覺效果 2018-01-15 -
這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問題思路解析,文中還給大家補充介紹了關(guān)于html,css,js三者的加載順序問題,需要的朋友參考下吧 2017-12-25

css3 animation制作loading白色圓點滑過加載動畫特效源碼
這是一款基于css3 animation制作白色圓點滑過加載動畫特效源碼,一組白色圓點從左向右依次滑過,圓點由小漸大模糊呈現(xiàn)。本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可以直接 2017-12-21 
純CSS3仿Skype圓點旋轉(zhuǎn)加載動畫特效源碼
純CSS3仿Skype圓點旋轉(zhuǎn)加載動畫特效源碼是一款loader登錄界面加載動畫,圓點旋轉(zhuǎn)加載動畫。本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可以直接下載使用 2017-12-18 
html5+css3實現(xiàn)的多彩旋轉(zhuǎn)式svg加載動畫特效源碼
html5+css3實現(xiàn)的多彩旋轉(zhuǎn)式svg加載動畫特效源碼是一段實現(xiàn)了非常炫酷也精致的svg加載動畫效果,本段代碼適應(yīng)于所有網(wǎng)頁使用,歡迎有興趣的朋友前來下載 2017-09-21
這篇文章主要介紹了css制作超萌吃豆豆加載動畫效果,需要的朋友可以參考下 2018-02-26
最新評論

需求:
有時加載數(shù)據(jù)比較慢,頁面一直沒有反應(yīng),用戶也許會不停的刷,而且用戶體驗也不好
解決:
在js中加入以下代碼即可
//提示信息 function AddRunningDiv() { $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body"); $("<div class=\"datagrid-mask-msg\"></div>").html("正在處理,請耐心等待...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 }); } //取消提示信息 function MoveRunningDiv() { $("div[class='datagrid-mask']").remove(); $("div[class='datagrid-mask-msg']").remove(); }
在需要的地方調(diào)用即可。
效果如下:整個頁面不可編輯
總結(jié)
以上所述是小編給大家介紹的CSS制作提示框 ‘正在加載請。。。。。’,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
純CSS3實現(xiàn)的多層圓環(huán)loading加載動畫特效源碼
是一款實現(xiàn)了多圓環(huán)同時旋轉(zhuǎn)的多層圓環(huán)loading加載動畫特效,非常有意思,大家可以自行替換顏色,適應(yīng)于絕大多數(shù)的網(wǎng)站使用,歡迎有興趣的朋友們前來下載使用2018-01-19純CSS3實現(xiàn)帶有衛(wèi)星軌道旋轉(zhuǎn)效果的加載動畫特效源碼
這是一款基于純CSS3實現(xiàn)帶有衛(wèi)星軌道旋轉(zhuǎn)效果的加載動畫特效源碼。畫面上有三個顏色各異且相互獨立的弧線在各自的軌道上旋轉(zhuǎn),整體呈現(xiàn)出軌道衛(wèi)星動畫的加載視覺效果2018-01-15- 這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問題思路解析,文中還給大家補充介紹了關(guān)于html,css,js三者的加載順序問題,需要的朋友參考下吧2017-12-25
css3 animation制作loading白色圓點滑過加載動畫特效源碼
這是一款基于css3 animation制作白色圓點滑過加載動畫特效源碼,一組白色圓點從左向右依次滑過,圓點由小漸大模糊呈現(xiàn)。本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可以直接2017-12-21純CSS3仿Skype圓點旋轉(zhuǎn)加載動畫特效源碼
純CSS3仿Skype圓點旋轉(zhuǎn)加載動畫特效源碼是一款loader登錄界面加載動畫,圓點旋轉(zhuǎn)加載動畫。本段代碼可以在各個網(wǎng)頁使用,有需要的朋友可以直接下載使用2017-12-18html5+css3實現(xiàn)的多彩旋轉(zhuǎn)式svg加載動畫特效源碼
html5+css3實現(xiàn)的多彩旋轉(zhuǎn)式svg加載動畫特效源碼是一段實現(xiàn)了非常炫酷也精致的svg加載動畫效果,本段代碼適應(yīng)于所有網(wǎng)頁使用,歡迎有興趣的朋友前來下載2017-09-21- 這篇文章主要介紹了css制作超萌吃豆豆加載動畫效果,需要的朋友可以參考下2018-02-26