Jquery-Set-Popup-Box

jquery ist eine schnelle, kleine und leistungsstarke Bibliothek für JavaScript. In der Webentwicklung gehören Popup-Boxen zu den am häufigsten verwendeten Technologien. Mit jquery können wir den Popup-Box-Effekt einfach einrichten. In diesem Artikel wird erläutert, wie Sie mit jquery den Popup-Box-Effekt implementieren.

1. Importieren Sie die JQuery-Bibliotheksdatei

Bevor Sie JQuery verwenden, müssen Sie zuerst die JQuery-Bibliotheksdatei importieren. Sie können die neueste Version von jquery von der offiziellen Website herunterladen. Die Einführungsmethode lautet wie folgt:

<!-- 引入jquery库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Verwenden Sie jquery, um das Popup-Feld festzulegen.

1. Legen Sie das Popup-Feld manuell fest.

Wir können es manuell tun Legen Sie das Popup-Fenster fest, indem Sie mit der Maus klicken oder ein Ereignis auslösen. Zuerst müssen wir eine Popup-Box erstellen und den folgenden Code zum HTML hinzufügen:

<!-- 弹出框 -->
<div class="popup">
  <h2>弹出框标题</h2>
  <p>弹出框内容</p>
  <button class="close-btn">关闭</button>
</div>

Als nächstes müssen wir Jquery verwenden, um die Anzeige und das Ausblenden der Popup-Box zu steuern. Wir können dies auf folgende Weise erreichen:

$(function(){
  // 首先隐藏弹出框
  $('.popup').hide();

  // 点击事件触发弹出框显示
  $('#show-popup-btn').click(function(){
    $('.popup').fadeIn();
  });

  // 点击事件触发弹出框隐藏
  $('.close-btn').click(function(){
    $('.popup').fadeOut();
  });
});

Im Code verwenden wir die FadeIn- und FadeOut-Methoden von JQuery, um das Popup-Feld anzuzeigen und auszublenden. Wenn der Benutzer auf die Schaltfläche klickt, wird das Popup-Feld langsam auf dem Bildschirm ausgeblendet. Wenn der Benutzer auf die Schaltfläche „Schließen“ klickt, wird das Popup-Feld langsam auf dem Bildschirm ausgeblendet.

2. Automatisches Popup-Feld

Manchmal müssen wir das Feld automatisch öffnen, nachdem die Seite geladen wurde. Zu diesem Zeitpunkt können wir die Ready-Methode von jquery verwenden, um das Feld nach dem Laden der Seite automatisch zu öffnen. Der Code lautet wie folgt:

$(document).ready(function(){
  // 首先隐藏弹出框
  $('.popup').hide();

  // 自动触发弹出框显示
  $('.popup').fadeIn();

  // 点击事件触发弹出框隐藏
  $('.close-btn').click(function(){
    $('.popup').fadeOut();
  });
});

Im Code verwenden wir die ready-Methode von jquery, um die Anzeige des Popup-Fensters nach dem Laden der Seite auszulösen.

3. Verwenden Sie JQuery, um den Stil des Popup-Felds festzulegen.

Mit JQuery können wir den Stil des Popup-Felds ganz einfach festlegen. Legen Sie beispielsweise die Breite, Höhe, Hintergrundfarbe, Schriftgröße usw. des Popup-Felds fest. Im Folgenden sind einige Stileinstellungen aufgeführt:

$('.popup').css({
  'width': '400px',
  'height': '200px',
  'background-color': '#fff',
  'font-size': '16px'
});

Im Code verwenden wir die CSS-Methode von jquery, um den Stil des Popup-Felds festzulegen. Stileinstellungen können entsprechend den tatsächlichen Anforderungen vorgenommen werden.

Fazit:

In diesem Artikel wird kurz vorgestellt, wie Sie den Popup-Box-Effekt über JQuery festlegen. Zusätzlich zur manuellen Steuerung der Anzeige und Ausblendung des Popup-Felds können Sie das Feld auch automatisch öffnen und den Stil festlegen der Popup-Box. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonJquery-Set-Popup-Box. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!