Maison >interface Web >js tutoriel >NeoPopup - Le module popup moderne

NeoPopup - Le module popup moderne

Linda Hamilton
Linda Hamiltonoriginal
2025-01-04 19:15:39287parcourir

NeoPopup est un module popup 3D moderne, personnalisable et réactif conçu pour des interfaces Web élégantes et professionnelles. Avec des options de thèmes, d'animations et de personnalisation, ce module permet d'ajouter facilement une superbe popup à votre site Web.


Caractéristiques ?

  • Conception contextuelle 3D : animations 3D accrocheuses pour une interface utilisateur moderne.
  • Personnalisable : ajustez facilement le texte, les couleurs, la taille, le thème et bien plus encore.
  • Fermeture automatique : fonctionnalité de fermeture automatique en option avec durée personnalisable.
  • Mode persistant : mémorisez les préférences de l'utilisateur à l'aide du stockage local.
  • Réactif : fonctionne de manière transparente sur tous les appareils et tailles d'écran.
  • Thèmes clairs/sombres : prise en charge intégrée de la sélection de thèmes.
  • Positionnement : affichez des fenêtres contextuelles dans n'importe quel coin de l'écran.

Aperçu ?

NeoPopup - The Modern Popup Module


Installation ?

Clonez le référentiel ou téléchargez les fichiers du module :

git clone https://github.com/BOSS294/NeoPopup.git

Incluez le fichier JavaScript dans votre projet :

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

Utilisation ?

Exemple de base

developmentPopup.init({
    title: "Welcome to NeoPopup!",
    body: "Thank you for exploring the modern 3D popup module.",
    buttonText: "Learn More",
    buttonCallback: () => window.open('https://github.com/BOSS294/NeoPopup', '_blank'),
});

Options disponibles

Option Type Default Description
title string "Under Development" Title of the popup.
body string "Oops!" Body content (HTML supported).
buttonText string "Check Latest Updates" Text for the main button.
buttonCallback function null Callback function for the main button click.
position string "bottom-right" Popup position: top-right, top-left, bottom-right, or bottom-left.
theme string "dark" Theme for the popup: dark or light.
colors object {} Custom colors: { background, text, button }.
size object {} Size options: { width, height }.
animation string "slide" Animation type.
autoClose boolean false Automatically close the popup.
closeDuration number 5000 Auto-close duration in milliseconds.
persistent boolean false Prevent popup from showing repeatedly using local storage.

Stylisme ?

Pour inclure le style intégré de NeoPopup, assurez-vous de ce qui suit :

  • Le div DP-popup-wrapper est inclus dans votre code HTML.
  • NeoPopup est livré avec des animations 3D, des effets d'ombre et des thèmes personnalisables.

Pour personnaliser davantage le design, modifiez le CSS inclus :

git clone https://github.com/BOSS294/NeoPopup.git

Exemple avec le mode persistant

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

Contribuer ?

Les contributions sont toujours les bienvenues ! Voici comment vous pouvez aider :

  1. Forkez le référentiel.
  2. Créez votre branche de fonctionnalités : git checkout -b feature/AmazingFeature.
  3. Validez vos modifications : git commit -m "Add some AmazingFeature".
  4. Push vers la branche : git push origin feature/AmazingFeature.
  5. Ouvrez une pull request.

Soutien ?

Pour toute question ou demande de fonctionnalité :

  • E-mail : mayankchawdhari@gmail.com
  • Problèmes GitHub : Problèmes NeoPopup

Licence ?

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


Développé avec ❤️ par Mayank Chawdhari. ?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn