CSS製作提示框 ‘正在載入請。。。。。’的方法

來源:互聯網
上載者:User
這篇文章主要介紹了關於CSS製作提示框 ‘正在載入請。。。。。’的方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

最近做項目遇到這樣的需求,頁面載入資料比較慢,一直沒有反應,下面小編給大家帶來了基於CSS製作提示框 ‘正在載入請。。。。。’功能,需要的朋友參考下吧

需求:

有時載入資料比較慢,頁面一直沒有反應,使用者也許會不停的刷,而且使用者體驗也不好

解決:

在js中加入以下代碼即可

//提示資訊  function AddRunningp() {      $("<p class=\"datagrid-mask\"></p>").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body");      $("<p class=\"datagrid-mask-msg\"></p>").html("正在處理,請耐心等待...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 });  }  //取消提示資訊  function MoveRunningp() {      $("p[class='datagrid-mask']").remove();      $("p[class='datagrid-mask-msg']").remove();  }

在需要的地方調用即可。

效果如下:整個頁面不可編輯

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.