Erstellen Sie mit CSS ein Eingabeaufforderungsfeld „Laden“.

Dieses Mal bringe ich Ihnen das Eingabeaufforderungsfeld „Laden“ mit CSS. Was sind die Vorsichtsmaßnahmen für die Erstellung des Eingabeaufforderungsfelds „Laden“ mit CSS?

Anforderungen:

Manchmal ist das Laden von Daten langsam, die Seite reagiert nicht, Benutzer scrollen möglicherweise weiter und die Benutzererfahrung ist nicht gut

Lösung:

Fügen Sie den folgenden Code zu js hinzu

//提示信息  
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();  
}

Rufen Sie ihn einfach dort auf, wo er benötigt wird.

Der Effekt ist wie folgt: Die gesamte Seite kann nicht bearbeitet werden

                                          🎜> Glauben Sie, nachdem Sie den Fall in diesem Artikel gelesen haben, dass Sie die Methode beherrschen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Zeigerereignissen in CSS3

Verwendung von Pseudoelementen:: vorher und ::nachher Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS ein Eingabeaufforderungsfeld „Laden“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!