Modal     

Quasar Modals slide in off screen to display a temporary UI, often used for login or signup pages, message composition, and option selection.

Basic Usage

<q-modal ref="basicModal">
  <h4>Basic Modal</h4>
  <button class="primary" @click="$refs.basicModal.close()">Close</button>
</q-modal>

Modals are responsive to the width of the window (see demo on a desktop and resize browser window). Sometimes you need to always have a Modal maximized or always minimized. For this case, add minimized or maximized CSS class:

<q-modal class="maximized">
  ...
</q-modal>

Vue Properties

PropertyTypeDescription
position-classesStringSpace delimited CSS classes that overwrite the default ‘items-center justify-center’ classes.
content-cssObjectApplies CSS style Object to Modal container.
content-classesObject or StringClasses to apply to Modal inner content.
transitionStringVue transition to use. Quasar comes with q-modal out of the box. But you can write your own Vue transitions using CSS and use them.
noBackdropDismissBooleanDisable Modal dismissal by clicking/tapping on backdrop.
noEscDismissBooleanDisable Modal dismissal by hitting Escape key.
positionStringStick Modal to one of the screen edges (top, right, bottom, left).

Vue Methods

MethodDescription
openOpen Modal. Takes one optional Function parameter to trigger after Modal is opened.
closeClose Modal. Takes one optional Function parameter to trigger after Modal is closed.
toggleToggle open/close Modal state. Takes one optional Function parameter to trigger after Modal is toggled.

Vue Events

Event NameDescription
@openTriggered right after Modal is opened.
@closeTriggered right after Modal is closed.
@escape-keyTriggered if Modal is dismissed with Escape key on desktops.

Examples

Capturing Events

<q-modal
  @open="notify('open')"
  @escape-key="notify('escape-key')"
  @close="notify('close')"
>
  ...
</q-modal>

Styling Modal

<q-modal :content-css="{padding: '50px'}">
  ...
</q-modal>
<q-modal
  ref="layoutModal"
  :content-css="{minWidth: '80vw', minHeight: '80vh'}"
>
  <q-layout>
    <div slot="header" class="toolbar">
      <button @click="$refs.layoutModal.close()">
        <i>keyboard_arrow_left</i>
      </button>
      <q-toolbar-title :padding="1">
        Header
      </q-toolbar-title>
    </div>
    <div slot="header" class="toolbar primary">
      <q-search class="primary"></q-search>
    </div>
    <div slot="footer" class="toolbar">
      <q-toolbar-title :padding="1">
        Footer
      </q-toolbar-title>
    </div>
    <div class="layout-view">
      <div class="layout-padding">
        <h1>Modal</h1>
        <button class="primary" @click="$refs.layoutModal.close()">Close</button>
        <p class="caption" v-for="n in 15">This is a Modal presenting a Layout.</p>
      </div>
    </div>
  </q-layout>
</q-modal>
Infinite Scroll Image Gallery
Last updated: Fri Aug 18 2017
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub