CSS-Eingabeaufforderungsfeld „Bitte laden.“ . . . . ’-Methode

Dieser Artikel befasst sich hauptsächlich mit der Erstellung der CSS-Eingabeaufforderungsbox „Bitte laden“. . . . . '-Methode hat einen gewissen Referenzwert. Jetzt kann ich sie mit allen teilen.

Kürzlich bin ich auf eine solche Nachfrage in einem Projekt gestoßen, und es gab keine Antwort. Der Editor unten Wir haben Ihnen eine auf CSS basierende Eingabeaufforderungsbox „Loading Please“ bereitgestellt. . . . . „Funktion, Freunde, die sie benötigen, können darauf verweisen

Anforderungen:

Manchmal ist das Laden von Daten langsam und die Seite reagiert möglicherweise nicht 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=&#39;datagrid-mask&#39;]").remove();  
    $("p[class=&#39;datagrid-mask-msg&#39;]").remove();  
}

Rufen Sie einfach dort an, wo es nötig ist.

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

                                 Achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Ungefähr 20 von CSS3 erzeugte Ladeanimationseffekte

Informationen zur Verwendung von CSS3-Bildrändern

Das obige ist der detaillierte Inhalt vonCSS-Eingabeaufforderungsfeld „Bitte laden.“ . . . . ’-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!