Wie erstelle ich ein einfaches jQuery-Popup mit einem beschrifteten E-Mail-Textfeld?

Ein einfaches Popup mit jQuery erstellen

Beim Entwerfen von Webseiten kann es vorkommen, dass Sie zusätzliche Informationen oder Inhalte in einem anzeigen möchten separates Popup-Fenster bei einer bestimmten Benutzeraktion. Dieser Artikel führt Sie durch den Prozess der Erstellung eines einfachen Popups mit jQuery und konzentriert sich dabei auf die Anzeige eines beschrifteten E-Mail-Textfelds.

Schritt 1: CSS-Styling

Zuerst Definieren Sie die CSS-Stile, um das Erscheinungsbild des Popups anzupassen.

a.selected {
  background-color: #1F75CC;
  color: white;
  z-index: 100;
}

.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  cursor: default;
  display: none;
  margin-top: 15px;
  position: absolute;
  text-align: left;
  width: 394px;
  z-index: 50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

Dieses CSS definiert Stile für das Popup-Element, das verknüpfte Element, das das auslöst Popup, Beschriftungen und Absatzelemente innerhalb des Popups.

Schritt 2: JavaScript-Funktionalität

Als nächstes erstellen Sie die JavaScript-Funktionen zur Handhabung des Popup-Verhaltens:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

• deselect(): Diese Funktion schließt das Popup und entfernt den ausgewählten Status aus dem verknüpften element.
• $('#contact').on('click', ...): Dieser Ereignishandler schaltet die Sichtbarkeit des Popups um, wenn auf das Element mit der ID „Kontakt“ geklickt wird.
• $('.close').on('click', ...): Dieser Event-Handler schließt das Popup, wenn das 'close'-Element vorhanden ist angeklickt.
• $.fn.slideFadeToggle: Diese benutzerdefinierte Funktion blendet das Popup sanft ein und schaltet die Sichtbarkeit um.

Schritt 3: HTML-Struktur

Zuletzt definieren Sie die HTML-Struktur für das Popup und den Link Element:

<div class="messagepop pop">
  <form method="post">
<p>Dieser HTML-Code definiert den Popup-Inhalt, einschließlich eines Formulars mit einer E-Mail-Eingabe und eines Nachrichtentextbereichs sowie des verknüpften Elements mit der ID „Kontakt“.</p>
<p> Durch die Kombination dieser Schritte können Sie ein einfaches Popup erstellen, das angezeigt wird, wenn auf den Link „Kontakt“ geklickt wird, und ein beschriftetes E-Mail-Textfeld enthält. Diese Technik kann leicht angepasst und an Ihre spezifischen Anforderungen angepasst werden.</p>
</form>
</div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein einfaches jQuery-Popup mit einem beschrifteten E-Mail-Textfeld?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!