PopupPro JS-Modul

PopupPro – Anpassbare Popup-Bibliothek?

Repository: PopupPro ?

Beschreibung:

PopupPro ist eine moderne, hochgradig anpassbare JavaScript-Bibliothek, die entwickelt wurde, um Benutzerinteraktionen mit vielseitigen und stilvollen Popups zu verbessern. Mit seinem umfangreichen Funktionsumfang, einschließlich flexibler Konfigurationen, flüssiger Animationen und reichhaltiger Gestaltungsoptionen, geht es über herkömmliche Popup-Bibliotheken hinaus. Egal, ob Sie eine einfache Benachrichtigung oder ein komplexes Modal mit verschiedenen Schaltflächen benötigen, PopupPro bietet eine intuitive Möglichkeit, ansprechende und optisch ansprechende Popups für Ihre Webanwendungen zu erstellen. ✨

---

Merkmale ?

1. Anpassbare Optionen:

   • Titel und Nachricht: Legen Sie ganz einfach den Titel und die Nachricht des Popups fest. ?
   • Hintergrundfarbe und Textfarbe: Vollständig anpassbare Farben für einen maßgeschneiderten Look. ?
   • Größe und Stil: Breite, Höhe und Randradius anpassbar, passend zu Ihrem Design. ?
   • Schaltfläche „Schließen“: Option zum Ein- oder Ausschließen der Schaltfläche „Schließen“. ❌

2. Animationsunterstützung:

   • Eingebaute Animationen: Wählen Sie aus vordefinierten Animationen wie Bounce oder erstellen Sie benutzerdefinierte Animationen. ?
   • Animationsdauer: Passen Sie das Animations-Timing für ein reibungsloses Erlebnis an. ⏳

3. Tastenkonfiguration:

   • Mehrere Schaltflächen: Unterstützung für mehrere Schaltflächen mit anpassbarem Text. ?
   • Schaltflächengestaltung: Gestalten Sie Schaltflächen mit verschiedenen Farben, Rahmen und Hover-Effekten. ?
   • Schaltflächenaktionen: Definieren Sie Aktionen und Weiterleitungs-URLs für jede Schaltfläche. ?

4. Responsiv und zugänglich:

   • Responsives Design: Entwickelt, um auf verschiedenen Bildschirmgrößen und Geräten gut zu funktionieren. ??
   • Barrierefreiheit: Fokusverwaltung und Overlay-Klick-Handhabung für verbesserte Barrierefreiheit. ♿

5. Fehlerbehandlung:

   • Fehlerberichte: Integrierte Fehlerbehandlung mit Konsolenprotokollierung und Warnungen. ⚠️

---

Wie sticht PopupPro heraus?

1. Umfangreiche Anpassung: Im Gegensatz zu vielen Popup-Bibliotheken ermöglicht PopupPro eine detaillierte Kontrolle über praktisch jeden Aspekt des Popups, einschließlich Animationstypen, Schaltflächenstilen und Gesamtdesign. Dieser Grad der Anpassung stellt sicher, dass Ihre Popups so angepasst werden können, dass sie sich nahtlos in jedes Design einfügen.

2. Animationsflexibilität: Während viele Popup-Module grundlegende Ein-/Ausblendanimationen bieten, unterstützt PopupPro eine Vielzahl von Animationen, einschließlich benutzerdefinierter Animationen, um ansprechende und dynamische Benutzererlebnisse zu schaffen. Sie können aus integrierten Animationen wie Bounce wählen oder Ihre eigenen definieren.

3. Vielseitige Tastenkonfiguration: PopupPro unterstützt mehrere Tasten mit unterschiedlichen Konfigurationen. Jede Schaltfläche kann über einen eigenen Text, Stil, eine eigene Aktion und eine optionale Weiterleitungs-URL verfügen, sodass komplexe Benutzerinteraktionen in einem einzigen Popup verarbeitet werden können.

4. Fokus auf Barrierefreiheit: PopupPro legt Wert auf Barrierefreiheit mit Funktionen wie Fokusverwaltung und Overlay-Klick-Handling und stellt so sicher, dass Ihre Popups für jeden nutzbar sind, auch für Benutzer mit Behinderungen.

5. Fehlerbehandlung und Debugging: Die Bibliothek umfasst eine umfassende Fehlerbehandlung mit Konsolenprotokollierung und Warnmeldungen, wodurch der Debugging-Prozess vereinfacht und die Zuverlässigkeit verbessert wird.

6. Klares und modernes Design: Das Standarddesign von PopupPro ist modern und klar und sorgt sofort für ein professionelles Erscheinungsbild. Es bietet außerdem umfangreiche Styling-Optionen, die Ihren spezifischen Designanforderungen entsprechen.

7. Responsives Design: PopupPro ist so konzipiert, dass es sich an verschiedene Bildschirmgrößen anpasst und sicherstellt, dass Ihre Popups sowohl auf mobilen als auch auf Desktop-Geräten großartig aussehen.

---

Über den Entwickler ?‍?

Entwickler: Mayank Chawdhari ?

Mayank Chawdhari ist ein engagierter und innovativer Webentwickler mit Schwerpunkt auf der Erstellung eleganter und benutzerfreundlicher Webanwendungen. Mayank verfügt über Fachkenntnisse in JavaScript, CSS und PHP und bringt eine Leidenschaft für sauberen Code und außergewöhnliche Benutzererlebnisse mit. Mayank ist bekannt für die Bereitstellung hochwertiger Lösungen und die kontinuierliche Erforschung neuer Technologien und setzt sich dafür ein, den Bereich der Webentwicklung voranzutreiben und die Benutzerinteraktionen zu verbessern. ??

---

Nutzung?

1. Binden Sie die Bibliothek ein:

Laden Sie PopupPro.js aus diesem Repository herunter oder fügen Sie es direkt in Ihr Projekt ein. Fügen Sie Ihrer HTML-Datei das folgende Skript-Tag hinzu:

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

2. Einfaches Popup-Beispiel:

Fügen Sie eine Schaltfläche zu Ihrem HTML hinzu und konfigurieren Sie das Popup mit 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. Konfigurationsoptionen:

• Titel: Titel des Popups. ?️
• Nachricht: Im Popup angezeigter Nachrichtentext. ?️
• backgroundColor: Hintergrundfarbe des Popup-Containers. ?
• textColor: Farbe des Textes. ?️
• Breite: Breite des Popup-Containers. ?
• Höhe: Höhe des Popup-Containers (optional). ?
• borderRadius: Randradius für abgerundete Ecken. ?
• closeButton: Boolescher Wert zum Ein- oder Ausblenden der Schließen-Schaltfläche. ❌
• animationDuration: Dauer der Popup-Animation. ⏳
• Animation: Animationstyp (z. B. Bounce). ?
• Schaltflächen: Array von Schaltflächenkonfigurationen, einschließlich Text, Stil, Klickaktion und optionaler Weiterleitungs-URL. ?

4. Umgang mit Tastenaktionen:

Jede Schaltfläche kann mit einem Text, einem Stil, einer OnClick-Funktion und einer optionalen Weiterleitungs-URL konfiguriert werden. Sofern nicht anders angegeben, wird das Popup automatisch geschlossen, nachdem auf die Schaltfläche geklickt wurde. ?

5. Erweiterte Verwendung:

Um die Standardeinstellungen anzupassen, verwenden Sie die setOptions-Methode:

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

6. Fehlerbehandlung:

Wenn ein Fehler auftritt, wird dieser in der Konsole protokolliert und in einem Warndialog zur schnellen Fehlerbehebung angezeigt. ?️

---

Mitwirken?

Beiträge sind willkommen! Bitte öffnen Sie Issues, reichen Sie Vorschläge ein oder erstellen Sie Pull Requests. Detaillierte Richtlinien finden Sie in der Datei CONTRIBUTING.md im Repository. ?

---

Lizenz?

Dieses Projekt ist unter der MIT-Lizenz lizenziert. Weitere Einzelheiten finden Sie in der LICENSE-Datei. ?

Für weitere Unterstützung oder Fragen öffnen Sie bitte ein Problem im GitHub-Repository. ?

Das obige ist der detaillierte Inhalt vonPopupPro JS-Modul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!