Maison > Article > interface Web > 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='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
🎜>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-imageCe 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!