Tip rapide: afficher une fenêtre contextuelle modale après le retard

Cet article explique comment utiliser JavaScript pour afficher une fenêtre modale après un court délai, une technique parfois utilisée pour les appels à l'action ou la publicité. L'auteur met en garde contre la surutilisation, car elle peut avoir un impact négatif sur l'expérience utilisateur.

L'exemple utilise le plugin ColorBox (nécessitant jQuery) et setTimeout() pour déclencher le modal après un retard spécifié (en millisecondes). L'article met l'accent sur l'accessibilité, suggérant de se concentrer sur le modal lors de l'ouverture et de la restauration de l'élément précédent après la fermeture. Pour améliorer la convivialité, il recommande de montrer le modal une seule fois toutes les quelques heures ou jours, en utilisant des cookies pour suivre l'affichage.

Détails de l'implémentation:

Le code incorpore:

• jQuery et Colorbox: pour la création et la gestion des fenêtres modales. L'article fournit des extraits de code pour inclure ces bibliothèques via les CDN.
• setTimeout(): pour contrôler le retard avant que le modal n'apparaisse.
• $.colorbox(): Pour afficher directement le modal ColorBox, spécifiant le contenu HTML, les noms de classe pour le style et les dimensions.
• onComplete et onClosed Événements: pour gérer la gestion de la mise au point (en utilisant la méthode focus()) et restaurer la focalisation après la fermeture.
• js-cookie: pour définir et vérifier les cookies pour contrôler la fréquence de l'affichage modal.

L'article comprend un exemple complet et de travail sur Codepen, démontrant comment définir un cookie pour limiter la fréquence d'affichage et gérer la mise au point. Il aborde également les questions courantes concernant les retards, la compatibilité des navigateurs et les méthodes alternatives. La section FAQ couvre divers aspects de la mise en œuvre des popups modaux chronométrés, y compris l'utilisation de bootstrap et les délais de compensation.

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!