Bootstrap-Javascript, modales Feld schließen

In der Webentwicklung ist die Modalbox ein häufig verwendetes Schnittstellenelement. Sie kann zum Anzeigen von Eingabeaufforderungen, zum Ausfüllen von Formularen usw. verwendet werden. Bootstrap ist ein weit verbreitetes Front-End-Framework, das viele praktische Komponenten, einschließlich Modalboxen, bereitstellt. Der mit der modalen Box verwendete JavaScript-Code kann das Anzeigen, Ausblenden, Schließen und andere Verhalten der modalen Box steuern. In diesem Artikel wird erläutert, wie Sie den Bootstrap-JavaScript-Code zum Schließen der modalen Box verwenden.

So schließen Sie die Modalbox

Bootstrap bietet verschiedene Möglichkeiten, die Modalbox zu schließen:

• Klicken Sie auf das Modal Box Die Schaltfläche „Schließen“;
• Klicken Sie außerhalb des modalen Feldes
• Rufen Sie die API-Methode in JavaScript auf.

Hier konzentrieren wir uns auf den dritten Weg, der darin besteht, die modale Box durch JavaScript-Code zu schließen.

Verwenden Sie die API-Methode, um die modale Box zu schließen

Die modale Box von Bootstrap bietet eine Methode modal, die mehrere Vorgänge wie Öffnen und Schließen unterstützt. Umschalten usw. Unter diesen ist die Methode zum Schließen der Modalbox hide, und die spezifische Verwendung ist wie folgt: modal，它支持多种操作，如打开、关闭、切换等。在其中，关闭模态框的方法为hide，具体用法如下：

$('#myModal').modal('hide');

其中'#myModal'是模态框的id，如果你使用的是自定义样式，也可以替换成其他选择器。

例如，代码如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是一个简单的模态框结构，其中包括一个关闭按钮。下面我们就来看看如何使用JavaScript代码关闭它。

首先，我们需要获取模态框的jQuery对象：

const myModal = $('#myModal');

然后，可以把一个关闭模态框的方法封装成一个函数：

function hideModal() {
  myModal.modal('hide');
}

在需要关闭模态框的地方，只需要调用这个函数即可：

hideModal();

总结

本文介绍了Bootstrap JavaScript代码如何关闭模态框。通过modalrrreee

wobei '#myModal' ist die ID der modalen Box. Wenn Sie einen benutzerdefinierten Stil verwenden, können Sie ihn auch durch andere Selektoren ersetzen. #🎜🎜##🎜🎜#Der Code lautet beispielsweise wie folgt: #🎜🎜#rrreee#🎜🎜#Dies ist eine einfache modale Boxstruktur, die eine Schaltfläche zum Schließen enthält. Sehen wir uns an, wie Sie es mithilfe von JavaScript-Code deaktivieren. #🎜🎜##🎜🎜#Zuerst müssen wir das jQuery-Objekt der Modalbox abrufen: #🎜🎜#rrreee#🎜🎜#Dann können wir eine Methode zum Schließen der Modalbox in eine Funktion kapseln: #🎜🎜 #rrreee #🎜🎜#Wo immer Sie die modale Box schließen müssen, müssen Sie nur diese Funktion aufrufen: #🎜🎜#rrreee#🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel wird beschrieben, wie Sie die modale Box schließen mit Bootstrap-JavaScript-Code. Mit der modal-Methode können wir die Anzeige, das Ausblenden, das Umschalten und andere Verhaltensweisen der modalen Box im JavaScript-Code dynamisch steuern, was sehr praktisch ist. Im anschließenden Entwicklungsprozess können wir diese Methoden sinnvoll nutzen, um das Benutzererlebnis entsprechend den tatsächlichen Bedürfnissen zu optimieren. #🎜🎜#

Das obige ist der detaillierte Inhalt vonBootstrap-Javascript, modales Feld schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!