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">

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“.

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.

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!