CSS prompt box ‘Loading please. . . . . 'Methods

This article mainly introduces the CSS production prompt box ‘Loading please. . . . . ' method has a certain reference value. Now I will share it with you. Friends in need can refer to it.

Recently, I encountered such a demand in a project. The page loaded data slowly and there was no response. The editor below We have brought you a prompt box 'Loading Please' based on CSS. . . . . 'Function, please refer to it if you need it

Requirements:

Sometimes loading data is slow, the page does not respond, and users may keep scrolling , and the user experience is not good

Solution:

Add the following code to 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=&#39;datagrid-mask&#39;]").remove();  
    $("p[class=&#39;datagrid-mask-msg&#39;]").remove();  
}

Just call it where needed.

The effect is as follows: the entire page cannot be edited

                                                                                                                   , please pay attention to more related content PHP Chinese website!

Related recommendations:

About 20 loading animation effects produced by CSS3

About css3 image border border-image usage

The above is the detailed content of CSS prompt box ‘Loading please. . . . . 'Methods. For more information, please follow other related articles on the PHP Chinese website!