如何关闭页面中所有弹出层？

一、使用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>