QDialog 组件非常适合用来让用户选择某个操作或一组操作，也可以用来向用户展示重要信息，或者要求用户做出一个（或多个）决定。

从 UI 的角度来看，对话框可以理解为一种浮动的模态窗口，它只覆盖屏幕的一部分区域。因此，对话框应该只用于快速的用户交互场景，比如验证密码、显示简短的通知、或者快速选择某个选项。

用法

基础

样式

定位

多样化内容

对话框可以包含任意内容，以下是一些示例：

处理滚动

不同模式

用户无法通过按 ESCAPE 键或点击/触摸背景遮罩来关闭对话框。

对话框也可以作为页面的一部分存在，而不需要立即获取焦点。这就是"无缝"模式的用武之地：

嵌套对话框

你可以在对话框之上再打开对话框，支持无限层级的嵌套。

尺寸调整

你可以自定义对话框的尺寸。注意，我们可以通过修改内容的样式，或者使用 full-width、full-height 属性来实现：

Cordova/Capacitor 返回按钮

Quasar 默认会帮你处理返回按钮的行为——按下返回键时会关闭已打开的对话框，而不是执行默认的返回上一页操作（那样的用户体验并不好）。

不过，如果你想禁用这个行为，可以编辑 /quasar.config 文件：

// quasar.config file
return {
  framework: {
    config: {
      capacitor: {
        // Quasar 处理手机返回按钮的退出行为
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另外，以下配置可以完全禁用
        // Quasar 对返回按钮的管理
        backButton: true/false
      }
    }
  }
}

Accessibility

v2.25+

QDialog follows the WAI-ARIA dialog pattern: the popup renders with role="dialog" and a managed aria-modal attribute — "true" while the dialog has a backdrop, while a seamless dialog (which does not block the rest of the page) keeps the dialog role but announces aria-modal="false".

Focus is managed for you. On open, it moves into the dialog — to the first element bearing an autofocus (or data-autofocus) attribute, or to the dialog body itself when there is none. While the dialog is modal, focus that strays outside of it gets recaptured back in, and on close it returns to the element that opened the dialog. The no-focus, no-refocus and allow-focus-outside props opt out of each of these behaviors, should you need to manage focus yourself. Escape dismisses the dialog — a persistent dialog responds with its “shake” animation instead.