So erstellen Sie ein JQuery-Popup-Fenster-Front-End-Fragen und Antworten-php.cn

So erstellen Sie ein JQuery-Popup-Fenster

王林

Freigeben： 2023-05-25 13:03:08

Original

1094 Leute haben es durchsucht

<p>jQuery ist eine schnelle, übersichtliche JavaScript-Bibliothek, die das Durchlaufen und Bearbeiten von HTML-Dokumenten, die Ereignisbehandlung, das Animationsdesign und die Ajax-Interaktion vereinfacht. In der Webentwicklung sind Popup-Fenster eine gängige Interaktionsmethode. In diesem Artikel wird erläutert, wie Sie mit jQuery Popup-Fenster erstellen.

<p>Zuerst müssen wir den CDN-Link der jQuery-Bibliothek in die HTML-Datei einführen:

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

Nach dem Login kopieren

<p>Als nächstes erstellen wir einen HTML-Teil, der den Popup-Inhalt enthält:

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Hello World!</p>
  </div>
</div>

Nach dem Login kopieren

<p>Hier gibt das Element <div> einen Popup-Fenstercontainer mit der ID myModal und dem Klassennamen modal an ; < Das Element code><div> enthält einen weiteren Container mit dem Klassennamen modal-content, der zur Anzeige des Inhalts des Popup-Fensters verwendet wird; <span> Das Element gibt ein Gabelsymbol mit dem Klassennamen close an, das zum Schließen des Popup-Fensters <p> verwendet wird. Das -Element enthält den Textinhalt, den wir im Popup-Fenster anzeigen möchten. <div>元素指定了一个ID为myModal和类名为modal的弹窗容器；<div>元素中包含另一个类名为modal-content的容器，用于显示弹窗的内容；<span>元素指定了一个类名为close的叉子图标，用于关闭弹窗；<p>元素包含了我们想要在弹窗中显示的文本内容。

<p>接下来，我们需要编写JavaScript代码来实现弹窗：

// 获取弹窗元素
var modal = document.getElementById('myModal');

// 获取叉子图标元素
var closeBtn = document.getElementsByClassName('close')[0];

// 当叉子图标被点击时，关闭弹窗
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// 当用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// 当按钮被点击时，显示弹窗
$('#myButton').click(function() {
  modal.style.display = "block";
});

Nach dem Login kopieren

<p>这里，我们首先获取了弹窗元素和叉子图标元素。然后，在叉子图标被点击时，我们使用onclick事件来将弹窗的显示属性设置为none，从而关闭弹窗。接下来，我们使用window对象的onlick事件来监听用户在窗口中的其他部分的点击事件，以便在用户单击弹窗以外的区域时关闭弹窗。

<p>最后，我们监听按钮的点击事件，并在单击时使用jQuery将弹窗的显示属性设置为block，从而显示弹窗。这里我们使用了jQuery的click()

Als nächstes müssen wir JavaScript-Code schreiben, um das Popup-Fenster zu implementieren: <p>rrreee

Hier erhalten wir zuerst das Popup-Fensterelement und das Gabelsymbolelement. Wenn dann auf das Gabelsymbol geklickt wird, verwenden wir das Ereignis onclick, um die Anzeigeeigenschaft des Popup-Fensters auf none zu setzen und dadurch das Popup-Fenster zu schließen. Als nächstes verwenden wir das onlick-Ereignis des window-Objekts, um auf die Klickereignisse des Benutzers in anderen Teilen des Fensters zu warten, sodass das Popup geschlossen werden kann, wenn der Benutzer außerhalb klickt das Popup-Fenster. <p>

Abschließend hören wir uns das Klickereignis der Schaltfläche an und verwenden jQuery, um das Anzeigeattribut des Popup-Fensters auf block zu setzen, wenn darauf geklickt wird, um das Popup anzuzeigen Fenster. Hier verwenden wir die Methode click() von jQuery, um Klickereignisse zu registrieren. <p>

Mit dem obigen Code haben wir nun ein einfaches jQuery-Popup-Beispiel erstellt. In tatsächlichen Projekten können Sie Popup-Fenster mithilfe von Stilen und JavaScript-Code an unterschiedliche Anforderungen anpassen. #🎜🎜##🎜🎜#Zusammenfassung: #🎜🎜##🎜🎜#jQuery ist eine beliebte JavaScript-Bibliothek, die verwendet werden kann, um das Durchlaufen und Bearbeiten von HTML-Dokumenten, die Ereignisbehandlung, das Animationsdesign und die Ajax-Interaktion zu vereinfachen. Mit jQuery können Sie ganz einfach Popup-Fenster erstellen und den Stil und die Funktionalität des Popup-Fensters nach Bedarf anpassen. In tatsächlichen Projekten können Sie jQuery verwenden, um eine erweiterte Benutzerinteraktionserfahrung zu erzielen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein JQuery-Popup-Fenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!