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() { $("
").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body"); $("
").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(); }

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!