Module PopupPro JS

PopupPro - Bibliothèque contextuelle personnalisable ?

Dépôt : PopupPro ?

Description :

PopupPro est une bibliothèque JavaScript moderne et hautement personnalisable conçue pour améliorer les interactions des utilisateurs avec des popups polyvalents et élégants. Il va au-delà des bibliothèques contextuelles traditionnelles avec son ensemble complet de fonctionnalités, notamment des configurations flexibles, des animations fluides et de riches options de style. Que vous ayez besoin d'une simple alerte ou d'un modal complexe avec divers boutons, PopupPro fournit un moyen intuitif de créer des popups attrayants et visuellement attrayants pour vos applications Web. ✨

---

Caractéristiques ?

1. Options personnalisables :

   • Titre et message : Définissez facilement le titre et le message de la popup. ?
   • Couleur de fond et couleur du texte : Couleurs entièrement personnalisables pour un look sur mesure. ?
   • Taille et style :Largeur, hauteur et rayon de bordure réglables pour correspondre à votre design. ?
   • Bouton de fermeture : Option pour inclure ou exclure le bouton de fermeture. ❌

2. Support d'animation :

   • Animations intégrées : Choisissez parmi des animations prédéfinies comme le rebond, ou créez des animations personnalisées. ?
   • Durée de l'animation : Affinez le timing de l'animation pour une expérience fluide. ⏳

3. Configuration des boutons :

   • Plusieurs boutons : Prise en charge de plusieurs boutons avec du texte personnalisable. ?
   • Style des boutons : Stylez les boutons avec différentes couleurs, bordures et effets de survol. ?
   • Actions des boutons : Définissez des actions et des URL de redirection pour chaque bouton. ?

4. Réactif et accessible :

   • Conception réactive : Conçu pour fonctionner correctement sur différentes tailles d'écran et appareils. ??
   • Accessibilité : Gestion du focus et gestion des clics en superposition pour une accessibilité améliorée. ♿

5. Gestion des erreurs :

   • Rapport d'erreurs : Gestion intégrée des erreurs avec journalisation et alertes de la console. ⚠️

---

Comment PopupPro se démarque-t-il ?

1. Personnalisation étendue : Contrairement à de nombreuses bibliothèques contextuelles, PopupPro permet un contrôle granulaire sur pratiquement tous les aspects de la fenêtre contextuelle, y compris les types d'animation, les styles de boutons et la conception globale. Ce niveau de personnalisation garantit que vos popups peuvent être adaptées pour s'intégrer parfaitement à n'importe quel design.

2. Flexibilité de l'animation : Alors que de nombreux modules contextuels offrent des animations de base en fondu entrant/sortant, PopupPro prend en charge une variété d'animations, y compris des animations personnalisées, pour créer des expériences utilisateur attrayantes et dynamiques. Vous pouvez choisir parmi des animations intégrées comme le rebond ou définir les vôtres.

3. Configuration polyvalente des boutons : PopupPro prend en charge plusieurs boutons avec diverses configurations. Chaque bouton peut avoir son propre texte, style, action et URL de redirection facultative, permettant de gérer les interactions utilisateur complexes dans une seule fenêtre contextuelle.

4. Concentrez-vous sur l'accessibilité : PopupPro met l'accent sur l'accessibilité avec des fonctionnalités telles que la gestion du focus et la gestion des clics en superposition, garantissant que vos fenêtres contextuelles sont utilisables par tout le monde, y compris les utilisateurs handicapés.

5. Gestion des erreurs et débogage : La bibliothèque comprend une gestion complète des erreurs avec journalisation de la console et notifications d'alerte, simplifiant le processus de débogage et améliorant la fiabilité.

6. Design épuré et moderne : Le style par défaut de PopupPro est moderne et épuré, offrant une apparence professionnelle prête à l'emploi. Il offre également de nombreuses options de style pour répondre à vos besoins de conception spécifiques.

7. Conception réactive : PopupPro est conçu pour s'adapter à différentes tailles d'écran, garantissant ainsi que vos popups s'affichent parfaitement sur les appareils mobiles et de bureau.

---

À propos du développeur ?‍?

Développeur : Mayank Chawdhari ?

Mayank Chawdhari est un développeur Web dédié et innovant qui se concentre sur la création d'applications Web élégantes et conviviales. Avec une expertise en JavaScript, CSS et PHP, Mayank apporte une passion pour le code propre et les expériences utilisateur exceptionnelles. Connu pour fournir des solutions de haute qualité et explorer continuellement de nouvelles technologies, Mayank s'engage à faire progresser le domaine du développement Web et à améliorer les interactions des utilisateurs. ??

---

Utilisation ?

1. Inclure la bibliothèque :

Téléchargez PopupPro.js depuis ce référentiel ou incluez-le directement dans votre projet. Ajoutez la balise de script suivante à votre fichier HTML :

<script src="path/to/PopupPro.js"></script>

2. Exemple de fenêtre contextuelle de base :

Ajoutez un bouton à votre HTML et configurez la popup avec JavaScript :

<button onclick="PopupPro.show({
    title: 'Login Authentication',
    message: 'Wrong password or username, Please try again',
    backgroundColor: '#333',
    textColor: '#fff',
    width: '400px',
    borderRadius: '20px',
    buttons: [
        {
            text: 'Retry',
            style: 'default',
            onClick: function() { console.log('Retry button clicked'); }
        },
        {
            text: 'Cancel',
            style: 'default',
            onClick: function() { console.log('Cancel button clicked'); }
        }
    ]
})">Show Popup</button>

3. Options de configuration :

• title : Titre de la popup. ?️
• message : Texte du message affiché dans la popup. ?️
• backgroundColor : Couleur d’arrière-plan du conteneur popup. ?
• textColor : Couleur du texte. ?️
• width : Largeur du conteneur popup. ?
• hauteur : Hauteur du conteneur popup (facultatif). ?
• borderRadius : Rayon de bordure pour les coins arrondis. ?
• closeButton : valeur booléenne pour afficher ou masquer le bouton de fermeture. ❌
• animationDuration : Durée de l'animation du popup. ⏳
• animation : Type d'animation (par exemple, rebond). ?
• boutons : tableau de configurations de boutons, y compris le texte, le style, l'action de clic et l'URL de redirection facultative. ?

4. Gestion des actions des boutons :

Chaque bouton peut être configuré avec un texte, un style, une fonction onClick et une URL de redirection facultative. La fenêtre contextuelle se fermera automatiquement après avoir cliqué sur le bouton, sauf indication contraire. ?

5. Utilisation avancée :

Pour personnaliser les paramètres par défaut, utilisez la méthode setOptions :

<script src="path/to/PopupPro.js"></script>

6. Gestion des erreurs :

Si une erreur se produit, elle sera enregistrée sur la console et affichée dans une boîte de dialogue d'alerte pour un débogage rapide. ?️

---

Contribuer ?

Les contributions sont les bienvenues ! Veuillez ouvrir des problèmes, soumettre des suggestions ou créer des demandes d'extraction. Pour des instructions détaillées, reportez-vous au fichier CONTRIBUTING.md dans le référentiel. ?

---

Permis ?

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails. ?

Pour obtenir de l'aide ou des questions supplémentaires, veuillez ouvrir un problème sur le référentiel GitHub. ?

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!