CSS制作提示框 ‘正在加載請(qǐng)。。。。?！?/h1>

  發(fā)布時(shí)間：2017-09-14 09:50:08   作者：佚名   我要評(píng)論

最近做項(xiàng)目遇到這樣的需求，頁(yè)面加載數(shù)據(jù)比較慢，一直沒(méi)有反應(yīng)，下面小編給大家?guī)?lái)了基于CSS制作提示框 ‘正在加載請(qǐng)。。。。。’功能，需要的朋友參考下吧

 需求：

              有時(shí)加載數(shù)據(jù)比較慢，頁(yè)面一直沒(méi)有反應(yīng)，用戶也許會(huì)不停的刷，而且用戶體驗(yàn)也不好

解決：

         在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("正在處理，請(qǐng)耐心等待...").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)用即可。

效果如下：整個(gè)頁(yè)面不可編輯

                                                                                  

總結(jié)

以上所述是小編給大家介紹的CSS制作提示框 ‘正在加載請(qǐng)。。。。。’，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

• Tag：css   提示框  

相關(guān)文章

• 

  純CSS3實(shí)現(xiàn)的多層圓環(huán)loading加載動(dòng)畫(huà)特效源碼

  是一款實(shí)現(xiàn)了多圓環(huán)同時(shí)旋轉(zhuǎn)的多層圓環(huán)loading加載動(dòng)畫(huà)特效，非常有意思，大家可以自行替換顏色，適應(yīng)于絕大多數(shù)的網(wǎng)站使用，歡迎有興趣的朋友們前來(lái)下載使用

  2018-01-19
• 

  純CSS3實(shí)現(xiàn)帶有衛(wèi)星軌道旋轉(zhuǎn)效果的加載動(dòng)畫(huà)特效源碼

  這是一款基于純CSS3實(shí)現(xiàn)帶有衛(wèi)星軌道旋轉(zhuǎn)效果的加載動(dòng)畫(huà)特效源碼。畫(huà)面上有三個(gè)顏色各異且相互獨(dú)立的弧線在各自的軌道上旋轉(zhuǎn)，整體呈現(xiàn)出軌道衛(wèi)星動(dòng)畫(huà)的加載視覺(jué)效果

  2018-01-15

• CSS 的加載及加載順序簡(jiǎn)介

  這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問(wèn)題思路解析，文中還給大家補(bǔ)充介紹了關(guān)于html，css，js三者的加載順序問(wèn)題，需要的朋友參考下吧

  2017-12-25
• 

  css3 animation制作loading白色圓點(diǎn)滑過(guò)加載動(dòng)畫(huà)特效源碼

  這是一款基于css3 animation制作白色圓點(diǎn)滑過(guò)加載動(dòng)畫(huà)特效源碼，一組白色圓點(diǎn)從左向右依次滑過(guò)，圓點(diǎn)由小漸大模糊呈現(xiàn)。本段代碼可以在各個(gè)網(wǎng)頁(yè)使用，有需要的朋友可以直接

  2017-12-21
• 

  純CSS3仿Skype圓點(diǎn)旋轉(zhuǎn)加載動(dòng)畫(huà)特效源碼

  純CSS3仿Skype圓點(diǎn)旋轉(zhuǎn)加載動(dòng)畫(huà)特效源碼是一款loader登錄界面加載動(dòng)畫(huà)，圓點(diǎn)旋轉(zhuǎn)加載動(dòng)畫(huà)。本段代碼可以在各個(gè)網(wǎng)頁(yè)使用，有需要的朋友可以直接下載使用

  2017-12-18
• 

  html5+css3實(shí)現(xiàn)的多彩旋轉(zhuǎn)式svg加載動(dòng)畫(huà)特效源碼

  html5+css3實(shí)現(xiàn)的多彩旋轉(zhuǎn)式svg加載動(dòng)畫(huà)特效源碼是一段實(shí)現(xiàn)了非常炫酷也精致的svg加載動(dòng)畫(huà)效果，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，歡迎有興趣的朋友前來(lái)下載

  2017-09-21
• 

  css制作超萌吃豆豆加載動(dòng)畫(huà)效果

  這篇文章主要介紹了css制作超萌吃豆豆加載動(dòng)畫(huà)效果,需要的朋友可以參考下

  2018-02-26

最新評(píng)論