Wie erstelle ich einen einfachen Popup-Dialog mit jQuery?

Erstellen eines Popup-Dialogs mit jQuery

Im Webdesign werden Popup-Fenster häufig verwendet, um zusätzliche Informationen anzuzeigen oder Benutzereingaben zu sammeln. Dieser Artikel enthält eine Schritt-für-Schritt-Anleitung zum Generieren eines einfachen Popup-Fensters mit jQuery.

HTML-Struktur

Erstellen Sie zunächst ein HTML-Element, das ausgelöst wird das Popup-Fenster beim Klicken. In diesem Beispiel verwenden wir ein Div mit einer ID namens „mail“.

<div>
<p>Als nächstes erstellen Sie das Popup-Fenster selbst. Dies kann an einer beliebigen Stelle im Dokument platziert werden. Es sollte eine Beschriftung mit dem Text „E-Mail“ und ein Texteingabefeld enthalten.</p>
<pre class="brush:php;toolbar:false"><div class="messagepop pop">
  <form>
    <p><label for="email">Email</label><input type="text" name="email"></p>
<p><strong>CSS-Styling</strong></p>
<p>Wenden Sie Stile an, um das Erscheinungsbild des Popup-Fensters anzupassen und seine Elemente.</p>
<pre class="brush:php;toolbar:false">.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  padding: 25px;
  display: none;
}

label {
  display: block;
  margin-bottom: 3px;
}

jQuery Skript

Verwenden Sie abschließend jQuery, um das Verhalten des Popup-Fensters zu steuern. Fügen Sie dem Triggerelement und der Schaltfläche „Schließen“ Klickereignishandler hinzu und verwenden Sie die Funktion slideFadeToggle(), um das Popup-Fenster zu animieren.

$(function() {
  $('#mail').on('click', function() {
    $('.messagepop').slideFadeToggle();
  });

  $('.close').on('click', function() {
    $('.messagepop').slideFadeToggle();
    return false;
  });
});

Zusätzliche Überlegungen

Abhängig In der Anwendung müssen Sie den Popup-Inhalt möglicherweise dynamisch mithilfe eines Ajax-Aufrufs laden. Passen Sie HTML und JavaScript entsprechend an.

Indem Sie diese Schritte befolgen, können Sie mit jQuery ganz einfach ein einfaches Popup-Fenster implementieren. Passen Sie das Erscheinungsbild und die Funktionalität an die spezifischen Anforderungen Ihrer Webseite an.