Boîte d'invite CSS « Chargement s'il vous plaît. . . . . ' méthode

Cet article présente principalement la boîte d'invite CSS « ​​Chargement s'il vous plaît ». . . . . " La méthode a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Récemment, j'ai rencontré une telle demande dans un projet. La page chargeait les données lentement et il n'y avait pas de réponse. L'éditeur ci-dessous Nous vous avons apporté une boîte de dialogue 'Chargement' basée sur CSS. . . . . 'Fonction, les amis qui en ont besoin peuvent s'y référer

Exigences :

Parfois, le chargement des données est lent et la page ne répond pas. . , 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=&#39;datagrid-mask&#39;]").remove();  
    $("p[class=&#39;datagrid-mask-msg&#39;]").remove();  
}

Appelez-le simplement si nécessaire.

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

                                           🎜>J'espère que cela sera utile à l'étude de chacun, s'il vous plaît. faites attention au contenu plus connexe. Site Web chinois PHP !

Recommandations associées :

Environ 20 effets d'animation de chargement produits par CSS3

À propos de l'utilisation de la bordure d'image CSS3 border-image

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!