Wie erstellt man ein Bootstrap-Popup: Vollständige Anleitung

Pop-ups sind ein effektives Marketing-Tool mit hohen Konversionsraten. Sie können sie selbst erstellen, auch wenn Sie nur geringe oder keine Programmierkenntnisse haben. Finden wir heraus, wie man Pop-ups erstellt und sie mithilfe von Bootstrap zur Website hinzufügt und alternative vorgefertigte Lösungen anwendet.

Erstellen Sie ein kostenloses Bootstrap-Pop-up mit über 800 hochkonvertierenden Vorlagen

Loslegen

Was ist ein Bootstrap Pop-up

Ein Pop-up ist ein separates Website-Frame, das beim Laden der Website über dem restlichen Inhalt angezeigt wird und diesen vorübergehend blockiert, um die Aufmerksamkeit auf eine bestimmte Nachricht zu lenken. Beispiele beinhalten Anzeigen, Erinnerungen an ausstehende Einkäufe, Angebote zum Abonnieren von Updates, Anfragen zum Speichern einer Datei usw.

Pop-up Bootstrap ist ein kostenloses Toolkit zur Erstellung von Webanwendungen und modernen, dynamischen Websites. Es besteht aus Vorlagen, die in den Markup-Sprachen HTML und CSS sowie JavaScript-Erweiterungen geschrieben sind.

So können Sie mit JavaScript modale Pop-ups erstellen, die an ein bestimmtes Ereignis gebunden sind, wie beispielsweise wenn der Mauszeiger den Hauptframe verlässt oder wenn eine bestimmte Zeit abläuft. Mithilfe des Bootstrap-Plugins können Sie Elemente erstellen, die folgende Funktionen ausführen:

Angebot, in einen Chatroom zu gehen oder einen Rückruf zu bestellen;
Daten zur Kundensegmentierung sammeln;
Hilfe- und Referenzinformationen bereitstellen;
Multimedia-Inhalte in voller Ansicht anzeigen;
Produkte und Dienstleistungen bewerben;
Angebot, sich zu registrieren, um alle Funktionen der Website nutzen zu können;
Besuchern helfen, die Informationen zu finden, die sie benötigen, usw.

Bootstrap ermöglicht es Ihnen, bequeme und effektive Marketing-Tools zu erstellen. Sie helfen dabei, die Aufmerksamkeit eines Besuchers auf ein bestimmtes Angebot zu lenken und einen Besucher zur Zielhandlung zu führen. Sogar ein bisschen Wissen über die erwähnten Programmiersprachen bietet die Möglichkeit, die Konversionsrate erheblich zu steigern und die finanzielle Leistung des Unternehmens zu verbessern.

popup-bootstrap

Wie erstellt man ein Pop-up-Formular in Bootstrap

Die Erstellung eines Pop-up-Fensters erfordert keine Programmierkenntnisse, da Sie fertige Code-Snippets aus den Repositories extrahieren können. Lass uns herausfinden, wie man ein Pop-up-Fenster mit Bootstrap mit einem minimalen Satz funktionaler Elemente erstellt.

Beispiel zur Erstellung eines Bootstrap Pop-up

Bevor Sie beginnen, ein Pop-up-Formular in Bootstrap zu erstellen, müssen Sie sicherstellen, dass Ihre Website den Anforderungen des Plugins entspricht. Diese sollten für jede spezifische Version des Tools berücksichtigt werden. Zum Beispiel sollten Sie für das aktuelle Bootstrap 5.3 die HTML5-Markup-Sprache mit dem adaptiven Design verwenden, das es ermöglicht, das Fenster an die Parameter jedes Bildschirms anzupassen.

Der einfachste Weg, Bootstrap zu aktivieren, besteht darin, ein Code-Snippet mit den Adressen der CSS-Vorlagen und JavaScript-Bibliotheken in den <head>-Abschnitt hinzuzufügen:

<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Sie können auch eine fertige Distribution von GitHub herunterladen, um sie in Ihre Entwicklungsumgebung zu integrieren. Entwickler bieten auch andere Installationsoptionen wie Paketmanager an.

Wie man ein Pop-up-Fenster mit Bootstrap und JavaScript erstellt

Bootstrap-Entwickler bieten folgendes Beispiel, um die Fähigkeiten ihres Tools zu bewerten.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

Starten Demo-Modal

</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modaltitel</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
<h5 class="text-center mb-5">Fügen Sie hier Ihren Text ein</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
        <button type="button" class="btn btn-primary">Änderungen speichern</button>
      </div>
    </div>
  </div>
</div>

Dieses Code-Snippet erzeugt ein kleines Pop-up-Fenster mit einem Text und zwei Buttons. Eine einfache Animation wird darauf angewendet — der Rahmen kommt von oben herunter und erhält allmählich seine Form. Es schließt, wenn Sie den entsprechenden Button drücken oder einfach in den Hintergrund klicken. In beiden Fällen geht das Fenster nach oben und verdunkelt sich, um vollständig zu verschwinden.

Schauen wir uns dieses Beispiel genauer an.

Ein Pop-up-Fenster aufrufen

Das Beispiel verwendet die einfachste Option — das Pop-up-Fenster mit einem Button aufzurufen. Dies ist nützlich, wenn Sie einem Besucher ein Registrierungsformular oder Hilfe bei der Verwendung einer bestimmten Funktion anbieten. Das folgende Snippet ist für das Starten des Codes verantwortlich:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

Starten Demo-Modal

</button>

Möchten Sie, dass sich das Fenster automatisch öffnet? Dann müssen Sie sich in das JavaScript-Studium vertiefen. Zum Beispiel können Sie das folgende Skript verwenden, um die Funktion 2 Sekunden nach dem Laden der Seite zu starten:

$(window).load(function(){
   setTimeout(function(){
       $('#myModal').modal('show');
   }, 2000);
});

Eine weitere beliebte Option ist es, ein Pop-up-Fenster aufzurufen, wenn der Mauszeiger den Hauptbildschirmrahmen verlässt. Wenn erkannt wird, dass ein Benutzer dabei ist, die Registerkarte zu schließen, wird ihm der letzte Satz angezeigt. Dieses Skript wird zu diesem Zweck verwendet:

<script>
    function addEvent(obj, evt, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evt, fn, false);
        } else if (obj.attachEvent) {
            obj.attachEvent("on" + evt, fn);
        }    }    addEvent(document, 'mouseout', function (evt) {
        var modalId = 'exitModal';
        if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('modal.' + modalId)) {
            var modal = new bootstrap.Modal('#' + modalId);
            modal.show();
            localStorage.setItem('modal.' + modalId, '1');
        }
    });
</script>

Der "Modal"-Block

Wie macht man ein modales Pop-up-Fenster reaktionsfähig in Bootstrap.

Das Pop-up-Fenster in unserem Beispiel besteht aus drei Teilen:

Kopfzeile mit dem Namen;

div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modaltitel</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

Hauptfenster mit einer Textbeschreibung;

<div class="modal-body">

<h5 class="text-center mb-5">Fügen Sie hier Ihren Text ein</h5>

</div>

Fußzeile mit Schaltflächen.

 <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
        <button type="button" class="btn btn-primary">Änderungen speichern</button>
      </div>

Diese Kategorisierung ist Standard für Pop-ups, die mit Bootstrap erstellt wurden. Sie können jedoch jeden Teil nach Ihrem eigenen Ermessen ausfüllen, indem Sie zahlreiche funktionale Elemente aus den Plugin-Bibliotheken verwenden.

Änderungen am Pop-up-Fenster

Der oben beschriebene Code reicht aus, um einfache Marketing-Tools zu erstellen. Aber Sie können viel mehr erreichen, indem Sie die Rahmen personalisieren.

Zum Beispiel ermöglicht Ihnen das folgende Snippet, eine bestimmte Größe eines Pop-up-Fensters festzulegen:

<div class="modal-dialog modal-OO">...</div>,

wobei OO die Variable ist, die das gewünschte Format angibt und die folgenden Werte annehmen kann:

sm — entspricht einer Breite von 320 Pixeln;
lg — 800 Pixel;
xl — 1140 Pixel.

Wenn Sie die Größenvariable weglassen, erscheint standardmäßig ein Pop-up-Fenster mit 500 Pixeln auf dem Bildschirm. Um den Rahmen auf die volle Bildschirmbreite zu strecken, verwenden Sie den folgenden Code:

<div class="modal-dialog modal-fullscreen">

Wenn Sie die Animation eines Pop-up-Fensters ändern möchten, achten Sie auf die Variable modal-fade. Die Bootstrap-Bibliotheken bieten eine Vielzahl von Effekten. Wenn Sie beispielsweise möchten, dass der Rahmen wie ein Kamerazoom hereinzoomt, fügen Sie das folgende Code-Snippet ein:

<div class="modal fade2" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Damit die Animation korrekt funktioniert, müssen Sie auch die CSS-Stile konfigurieren und das entsprechende Skript erstellen:

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
    display: block !important;
}
.fade2.show {
    opacity: 1;
    transform: scale(1);
}
und
$('#exampleModal').modal();
function afterModalTransition(e) {
  e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
    setTimeout( () => afterModalTransition(this), 200);
})

Ein weiteres interessantes Feature, das in Bootstrap verfügbar ist, ist das Blockieren eines Pop-up-Fensters. Es erlaubt Ihnen nicht, den Rahmen zu schließen, indem Sie auf den Hintergrund klicken oder Esc drücken. Um auf den Website-Inhalt zuzugreifen, muss der Benutzer eine gezielte Aktion ausführen, wie beispielsweise eine Registrierung nach dem Ablauf der Testphase. In diesem Fall wird der folgende Code verwendet:

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

Wie man ein Pop-up mit Claspo erstellt

Wenn Sie ein auffälligeres und ansprechenderes visuelles Element benötigen, können Sie eine fertige Lösung zur Erstellung von Pop-ups verwenden.

Eine der praktischsten Optionen ist das Tool Claspo.io. Es ermöglicht Ihnen, Pop-ups jeder Komplexitätsstufe ohne Programmierkenntnisse zu erstellen — sie werden nach dem „Baukasten“-Prinzip durch Ziehen verschiedener Elemente auf den Bildschirm erstellt. Lernen wir mehr über die Erstellung eines Pop-ups mit Claspo.

Testen Sie alle erweiterten Funktionen mit dem kostenlosen Lebenszeitplan von Claspo

Loslegen

Schritt 1: Registrierung

Gehen Sie zu Claspo und erstellen Sie ein Konto. Sie können sich auch mit sozialen Netzwerken oder Ihrem Google-Konto anmelden.

Wählen Sie einen geeigneten Tarifplan. Sie können sich kostenlos mit den Funktionen von Claspo vertraut machen – in diesem Fall stehen drei Widgets auf einer Website mit einer Gesamtanzahl von bis zu 30.000 Ansichten pro Monat zur Verfügung. Zusätzlich wird ein Pop-up-Fenster einen Link zum Web-Tool bereitstellen.

Die Tarifpläne von Claspo sind im Vergleich zu anderen Diensten erschwinglich und flexibel. Wählen Sie die beste Option für Ihre Geschäftsanforderungen, ohne für zusätzliche Funktionen und Ansichten zu viel zu bezahlen.

Schritt 2: Erstellen Sie ein Pop-up-Fenster

Claspo führt Sie durch die folgenden Schritte:

Zweck definieren — spezifizieren Sie, welche Funktion Sie umsetzen möchten;

define-the-purpose

Format auswählen — ein klassisches Fenster, ein Banner, ein schwebender Rahmen usw.;

select-the-format

Stileinstellungen — wählen Sie das Design, das Ihrem Website-Design entspricht;
Template-Auswahl — das Pop-up-Fenster nimmt eine vollständige Form an;

choice-of-template

Inhalt — ziehen und lassen Sie funktionale Elemente im Rahmen fallen, geben Sie Text ein, fügen Sie Bilder hinzu usw.

content

Der Vorteil des Tools besteht darin, dass Sie in wenigen Minuten nicht nur ein einfaches Fenster mit einem Textstück erstellen können, sondern ein helles visuelles Element, das die Aufmerksamkeit des Besuchers auf sich zieht und hohe Konversionsraten bietet.

create-pop-up-window

Schritt 3: Integration

integration

Wenn Sie ein Pop-up erstellen, erhalten Sie ein Skript, das auf die eigenen Bibliotheken von Claspo verweist. Sie können es selbst integrieren — das Tool stellt fertigen Code zur Verfügung und hilft Ihnen, die richtige Stelle zum Einfügen zu finden. Die Integration mit den meisten beliebten Content-Management-Systemen (CMS), einschließlich WordPress, ist ebenfalls verfügbar.

Schritt 4: Start

Sobald es in den Code Ihrer Website integriert ist, beginnt das Pop-up sofort zu funktionieren. Verwalten Sie es in der Claspo-Webschnittstelle, indem Sie bei Bedarf Einstellungen ändern und detaillierte Statistiken abrufen. Das Tool ist auch mit CRM und anderer Unternehmenssoftware kompatibel. Durch die tiefgreifende Integration können Sie personalisierte Angebote für jeden Website-Besucher basierend auf Aktivitätshistorie oder Segmentierung nach verschiedenen Merkmalen erstellen.

So erstellen Sie schnell ein Pop-up-Fenster auf der Website: Schlussfolgerung

Mit dem Bootstrap-Pop-up können Sie schnell Pop-up-Fenster erstellen und deren Inhalt, Größe, Funktionen und sogar Anzeigeanimationen flexibel verwalten. Grundlegende Programmierkenntnisse reichen aus, um die einfachsten Aufgaben zu erledigen, da der Großteil des Codes aus Open-Source-Repositorys wie GitHub übernommen werden kann.

Aber wenn Sie nach einem effektiven Konversionstool für Ihre Website suchen, lohnt es sich, die schlüsselfertige Lösung von Claspo zu nutzen. Sie können schnell und einfach helle und funktionale Pop-ups erstellen, ohne jegliche Kenntnisse des Codes! Diese werden nach dem Baukastenprinzip zusammengestellt, wobei Design und Inhalt ausgewählt werden, und das Tool passt sie an alle Geräte, Bildschirme und Browser an.

Sie können alle Funktionen von Claspo kostenlos ausprobieren! Melden Sie sich jetzt an, um das Potenzial des Tools zu bewerten und die beste Version von smarten Pop-ups für Ihr Unternehmen auszuwählen!

Erstellen Sie Ihr hochkonvertierendes Pop-up mit Claspo

Loslegen