CSS prompt box 'Loading please. . . . 'Example tutorial

I recently encountered such a demand when working on a project. The page loaded data slowly and there was no response. The following editor brought you a prompt box based on CSS ‘Loading please. . . . . 'Function, please refer to it if you need it

Requirements:

Sometimes loading data is slow and the page does not respond. 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

##

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