Dialog

The QDialog component is a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).

From a UI perspective, you can think of Dialogs as a type of floating modal, which covers only a portion of the screen. This means Dialogs should only be used for quick user actions, like verifying a password, getting a short App notification or selecting an option or options quickly.

TIP

Dialogs can also be used as a globally available method for more basic use cases, like the native JS alert(), prompt(), etc. For the latter behaviour, go to Dialog Plugin page.

TIP

When the user hits the phone/tablet back button (only for Cordova apps), the Dialog will be closed automatically. Also, when on a desktop browser, hitting the ESCAPE key will also close the Dialog, as does clicking or touching outside of the Dialog, unless configured otherwise.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QDialog'
    ],
    // NOT needed if using auto-import feature:
    directives: [
      'ClosePopup'
    ]
  }
}

Usage

Note

It’s best that your QDialog main content is a QCard. However, if you are planning on using any other component (like QForm) or tag, make sure that the direct child of QDialog is rendered with a <div> tag (or wrap it with one yourself).

Basic

Basic



Styling

Styling



Positioning

Positions



TIP

Do not mistake “position” prop with the show/hide animation. If you want a custom animation, you should use transition-show and transition-hide which can be applied regardless of “position” or “maximized”.

Maximized



Various content

Dialogs can contain any content. Some examples:

Various content



With containerized QLayout



TIP

If you are going to use the containerized QLayout, you’ll need to put a width on your QDialog, if using left/right position, or a height, if using top/bottom position. You can use vw and vh units.

Handling scroll

Scrollable dialogs



Different modes

User cannot dismiss the Dialog by pressing ESCAPE key or by clicking/tapping on its backdrop.

Persistent



Dialogs can also be a part of the page, without requiring immediate focus. It’s where “seamless” mode comes into play:

Seamless



Dialog in dialog

You are able to open dialogs on top of other dialogs, with infinite number of depth levels.

Inception



Sizing

You are able to customize the size of the Dialogs. Notice we either tamper with the content’s style or we use full-width or full-height props:

Sizing examples



QDialog API