Wie erstelle ich ein einfaches Popup-Fenster mit jQuery und CSS?

So zeigen Sie ein einfaches Popup-Fenster mit jQuery an

In der Webentwicklung kann die Anzeige von Popups die Benutzerinteraktivität verbessern. In diesem Artikel erfahren Sie, wie Sie mit jQuery ein einfaches Popup-Fenster mit einer Beschriftung und einem Eingabefeld erstellen.

Problem:

Stellen Sie sich eine Situation vor, in der Sie möchten um ein Popup-Fenster anzuzeigen, wenn auf ein Element mit der ID „mail“ geklickt wird. Dieses Popup sollte eine Beschriftung mit dem Text „E-Mail“ und ein entsprechendes Textfeld enthalten.

Lösung:

Um ein einfaches Popup-Fenster mit jQuery zu erstellen, gehen wir wie folgt vor Kombinieren Sie CSS und JavaScript. Lassen Sie es uns aufschlüsseln:

CSS:

Zuerst definieren wir die CSS-Stile für das Popup:

.pop {
//... CSS code here...
}

JavaScript:

Als nächstes erstellen wir die jQuery Funktionalität:

$("#contact").on('click', function() {
    //... jQuery code here...
});

HTML:

Zuletzt müssen wir das HTML-Markup für das Popup und das Element definieren, das es auslöst:

<div> <p><strong>Zusätzliche Überlegungen:</strong></p>
<p>Für ein verbessertes Benutzererlebnis können Sie Animationen integrieren das Popup. Wenn der Popup-Inhalt außerdem umfangreich ist, sollten Sie erwägen, ihn über AJAX zu laden, um die Latenz zu minimieren.</p>
<p><strong>Beispielimplementierung:</strong></p>
<p>Unten finden Sie eine vollständige Beispielimplementierung der Lösung vorausgesetzt:</p>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.pop {
  display: none;
  position: absolute;
  z-index: 1000;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}

JavaScript:

$("#contact").on('click', function() {
  $(".pop").toggle();
});

HTML:

<div><p>Diese Implementierung ermöglicht die Anzeige eines einfachen und reaktionsschnellen Popup-Fensters Klicken Sie auf den Link „Kontakt“.</p></div>