Javascript modal schließen

JavaScript Modal Close

Modal ist ein gängiges Popup-Fenster für Webseiten, das normalerweise zum Anzeigen von Inhalten, zum Anfordern einer Bestätigung oder zum Sammeln von Informationen verwendet wird. Das Erstellen eines Modals in JavaScript ist ein häufiger Vorgang, aber das Schließen des Modals ist möglicherweise nicht so einfach. In diesem Artikel werden mehrere gängige Methoden zum Schließen des JavaScript-Modals vorgestellt.

1. Mit jQuery

Wenn Sie jQuery verwenden, kann das Schließen des Modals auf folgende Weise erreicht werden:

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

Verwenden Sie modal("show"), um das Modal anzuzeigen, verwenden Sie modal("hide") um das Modal zu schließen. Unter anderem ist #myModal Ihr Modalselektor und muss entsprechend Ihrer tatsächlichen Situation geändert werden. modal("show") 来显示 modal，使用 modal("hide") 来关闭 modal。其中，#myModal 是你 modal 的选择器，需要根据你的实际情况进行更改。

2. 使用 Bootstrap 的方法

如果你使用了 Bootstrap ，可以使用以下的方式来关闭 modal：

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

和 jQuery 方法类似，使用 modal("show") 来显示 modal，使用 modal("hide") 来关闭 modal。同样，#myModal 是你 modal 的选择器，需要根据你的实际情况进行更改。

3. 使用原生 JavaScript 的方法

如果你不想使用 jQuery 或者 Bootstrap ，可以使用原生 JavaScript 来关闭 modal。这种方法需要用到 getElementById 方法来获取 modal 元素，使用 style.display 来设置其 display 属性为 none。

以下是一个示例代码：

// 显示 modal
document.getElementById("myModal").style.display = "block";

// 关闭 modal
document.getElementById("myModal").style.display = "none";

使用 style.display = "block" 来显示 modal，使用 style.display = "none" 来关闭 modal。同样，myModal 是你 modal 的 id，需要根据你的实际情况进行更改。

4. 在 modal 中添加关闭按钮

在 modal 中添加关闭按钮可以提供更好的用户体验，同时也可以方便用户关闭 modal，下面是一个示例代码：

<!-- 在 modal 中添加关闭按钮 -->
<div class="modal-header">
  <h5 class="modal-title">Modal 标题</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

可以看到，在 modal 的头部中添加了一个关闭按钮，其中 data-dismiss="modal" 属性是必须的，它指示按钮要关闭 modal。用户单击关闭按钮会触发 hide.bs.modal 事件，可以通过以下方式来捕获该事件：

$('#myModal').on('hide.bs.modal', function (e) {
  // do something...
})

关闭 modal 可以使用 modal("hide") 或 style.display = "none"

Verwenden der Bootstrap-Methode

Wenn Sie Bootstrap verwenden, können Sie die folgende Methode verwenden, um Modal zu deaktivieren:

rrreee🎜Ähnlich wie bei der jQuery-Methode verwenden Sie modal("show" ) , um das Modal anzuzeigen, verwenden Sie modal("hide"), um das Modal zu schließen. Ebenso ist #myModal Ihr Modalselektor und muss entsprechend Ihrer tatsächlichen Situation geändert werden. 🎜
🎜Native JavaScript-Methode verwenden🎜🎜🎜Wenn Sie jQuery oder Bootstrap nicht verwenden möchten, können Sie natives JavaScript verwenden, um Modal zu deaktivieren. Diese Methode erfordert die Verwendung der Methode getElementById, um das modale Element abzurufen, und die Verwendung von style.display, um das Attribut display auf none code>. 🎜🎜Das Folgende ist ein Beispielcode: 🎜rrreee🎜Verwenden Sie style.display = "block", um das Modal anzuzeigen, verwenden Sie style.display = "none", um das zu schließen modal. Ebenso ist myModal die id Ihres Modals, die entsprechend Ihrer tatsächlichen Situation geändert werden muss. 🎜
🎜Fügen Sie eine Schaltfläche zum Schließen im Modal hinzu🎜🎜🎜Das Hinzufügen einer Schaltfläche zum Schließen im Modal kann für eine bessere Benutzererfahrung sorgen und es Benutzern auch erleichtern, das Modal zu schließen. Hier ist ein Beispielcode : 🎜rrreee🎜 Wie Sie sehen können, wird am Kopf des Modals eine Schaltfläche zum Schließen hinzugefügt, wobei das Attribut data-dismiss="modal" erforderlich ist, das die Schaltfläche anweist, das Modal zu schließen. Wenn der Benutzer auf die Schaltfläche „Schließen“ klickt, wird das Ereignis hide.bs.modal ausgelöst. Dieses Ereignis kann auf folgende Weise erfasst werden: 🎜rrreee🎜Um das Modal zu schließen, können Sie verwenden modal("hide") oder style.display = "none", welche Sie wählen, hängt von Ihrer Implementierung ab. 🎜🎜Zusammenfassung🎜🎜Es gibt viele Möglichkeiten, ein Modal in JavaScript zu schließen, z. B. mit jQuery, Bootstrap oder nativem JavaScript, und dem Modal kann eine Schaltfläche zum Schließen hinzugefügt werden, um eine bessere Benutzererfahrung zu bieten. Welche Methode Sie verwenden sollten, hängt von Ihrer Implementierung und den Umständen ab. Unabhängig davon, für welche Methode Sie sich entscheiden, müssen Sie sicherstellen, dass das Modal erfolgreich geschlossen werden kann, da es sonst die Benutzererfahrung beeinträchtigen kann. 🎜

Das obige ist der detaillierte Inhalt vonJavascript modal schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!