Créez une boîte de dialogue 'Chargement' avec CSS

Cette fois, je vais vous apporter la boîte d'invite "Chargement" avec CSS. Quelles sont les précautions pour créer la boîte d'invite "Chargement" avec CSS Voici un cas pratique, jetons un coup d'œil.

Exigences :

Parfois, le chargement des données est lent, la page ne répond pas, les utilisateurs peuvent continuer à faire défiler et l'expérience utilisateur n'est pas bonne

Solution :

Ajoutez le code suivant à 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='datagrid-mask']").remove();  
    $("p[class='datagrid-mask-msg']").remove();  
}

Appelez-le simplement si nécessaire.

L'effet est le suivant : la page entière ne peut pas être modifiée

                                             🎜>

Croyez Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Utilisation de pseudo-éléments : avant et :: après Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!