如何關閉頁面中所有彈出層？

一、使用jQuery的dialog.closeAll()

jQuery UI 提供了一個 closeAll 方法可以關閉所有已打開對話框（dialog）。

示例代碼：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
// 關閉所有已打開對話框
jQuery.dialog.closeAll();
</script>

二、使用Bootstrap的modal方法

Bootstrap 模態框提供了一個 modal 方法，可以關閉所有彈出層（modal），即模態框。

示例代碼：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script>
// 關閉所有已打開模態框
$("div.modal").modal("hide");
</script>

三、使用JavaScript關閉所有窗口

使用原生JavaScript可以關閉所有已打開的窗口，不局限於對話框或模態框。

示例代碼：

<script>
// 關閉所有窗口
window.close();
</script>

四、使用Vue.js的$refs關閉組件

如果彈出層是使用 Vue.js 編寫的組件，可以使用 $refs 引用組件並關閉之。

示例代碼：

<template>
  <dialog ref="dialog1" />
  <dialog ref="dialog2" />
  <button @click="closeDialogs()">關閉所有對話框</button>
</template>

<script>
export default {
  methods: {
    closeDialogs() {
      this.$refs.dialog1.close();
      this.$refs.dialog2.close();
    }
  }
};
</script>

五、使用Angular的@ViewChild關閉組件

如果您使用的是 Angular 框架，您可以使用 @ViewChild 選項卡引用 console 組件並關閉它。

示例代碼：

<button (click)="closeConsole()">關閉控制台</button>

<app-console #appConsole></app-console>

<script>
import { Component, ViewChild } from '@angular/core';

@component({
  selector: 'app-root',
  template: `
    ...
    <app-console #appConsole></app-console>
    ...
    <button (click)="closeConsole()">關閉控制台</button>
    ...
  `
})
export class AppComponent {
  @ViewChild('appConsole') appConsole;

  closeConsole() {
    this.appConsole.close();
  }
}
</script>