---
title: "Vue Popup Understanding display modes Example | Mobiscroll"
component: "Popup"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/popup/mobile-desktop-display"
---

# Understanding display modes - Vue Popup demo

Vue popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/popup/mobile-desktop-display)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/pickers/popup/mobile-desktop-display)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/pickers/popup/mobile-desktop-display)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/mobile-desktop-display.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/mobile-desktop-display.md), [Angular](https://demo.mobiscroll.com/angular/popup/mobile-desktop-display.md), [React](https://demo.mobiscroll.com/react/popup/mobile-desktop-display.md)

## Description

The popup has four built-in display modes that can be controlled through the [`display`](https://mobiscroll.com/docs/vue/select/api#opt-display) option:

- `top` - popup that slides down from the top
- `bottom` - popup that slides up from the bottom
- `center` - popup that shows up in the middle with a pop animation
- `anchored` - popup that shows up anchored to an input or any dom element

The defaults change on a theme-to-theme basis. it defaults to `bottom` for the iOS theme and to `center` for all other themes.

**Want to see how to set up responsiveness?** [Check out this example →](https://demo.mobiscroll.com/vue/popup/responsive)

## What this demo shows

- Four popup examples demonstrate the supported display modes.
- **Anchored popup** Opens from a button and positions the popup below to that button or another DOM element.
- **Top popup** Opens as a modal that slides down from the top of the viewport.
- **Center popup** Opens in the middle of the viewport with a pop animation.
- **Bottom popup** Opens as a modal that slides up from the bottom of the viewport.
- **Modal layout** Each popup uses a custom layout and content.
- **Custom content** Each popup contains a custom image or logo, a heading, and descriptive text.
- **Button actions** The Cancel button dismisses the popup, while the blue Ok button confirms it.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.

## Best for

- **Anchored popups** Contextual information or actions that need to remain visually connected to an input or another page element.
- **Top popups** Messages and prompts that should enter from the top of the viewport.
- **Center popups** Confirmations and focused messages that need a prominent position in the viewport.
- **Bottom popups** Mobile-friendly prompts and actions that should enter from the bottom of the viewport.

## Tutorial

```vue
<MbscPopup
  display="anchored"
  :touchUi="true"
/>
```

```vue
<MbscPopup
  display="top"
  :touchUi="true"
/>
```

```vue
<MbscPopup
  display="center"
  :touchUi="true"
/>
```

```vue
<MbscPopup
  display="bottom"
  :touchUi="true"
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/popup/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/vue/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/vue/popup/api#opt-anchor) - option
- [`isOpen`](https://mobiscroll.com/docs/vue/popup/api#opt-isOpen) - option
- [`close`](https://mobiscroll.com/docs/vue/popup/api#event-onClose) - event

## Code

### SFC JS

```vue
<script setup>
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const buttonRef = ref(null)
const isAnchoredOpen = ref(false)
const isTopOpen = ref(false)
const isCenterOpen = ref(false)
const isBottomOpen = ref(false)
const myAnchor = ref()

function openAnchored() {
  myAnchor.value = buttonRef.value.instance.nativeElement
  isAnchoredOpen.value = true
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Try different display modes</div>
      <div class="mbsc-form-group mbsc-button-group-block">
        <MbscButton ref="buttonRef" @click="openAnchored">Try anhored display mode</MbscButton>
        <MbscButton @click="isTopOpen = true">Try top display mode</MbscButton>
        <MbscButton @click="isCenterOpen = true">Try center display mode</MbscButton>
        <MbscButton @click="isBottomOpen = true">Try bottom display mode</MbscButton>
      </div>
    </div>

    <MbscPopup
      display="anchored"
      :anchor="myAnchor"
      :isOpen="isAnchoredOpen"
      @close="isAnchoredOpen = false"
    >
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>

    <MbscPopup display="top" :isOpen="isTopOpen" @close="isTopOpen = false">
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>

    <MbscPopup display="center" :isOpen="isCenterOpen" @close="isCenterOpen = false">
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>

    <MbscPopup display="bottom" :isOpen="isBottomOpen" @close="isBottomOpen = false">
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>
  </MbscPage>
</template>

<style>
/* style */
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const isAnchoredOpen = ref(false)
const isCenterOpen = ref(false)
const isBottomOpen = ref(false)
const isTopOpen = ref(false)
const buttonRef = ref<any>(null)
const myAnchor = ref<any>(null)

function openAnchored() {
  myAnchor.value = buttonRef.value.instance.nativeElement
  isAnchoredOpen.value = true
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Try different display modes</div>
      <div class="mbsc-form-group mbsc-button-group-block">
        <MbscButton ref="buttonRef" @click="openAnchored">Try anhored display mode</MbscButton>
        <MbscButton @click="isTopOpen = true">Try top display mode</MbscButton>
        <MbscButton @click="isCenterOpen = true">Try center display mode</MbscButton>
        <MbscButton @click="isBottomOpen = true">Try bottom display mode</MbscButton>
      </div>
    </div>

    <MbscPopup
      display="anchored"
      :anchor="myAnchor"
      :isOpen="isAnchoredOpen"
      @close="isAnchoredOpen = false"
    >
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>

    <MbscPopup display="top" :isOpen="isTopOpen" @close="isTopOpen = false">
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>

    <MbscPopup display="center" :isOpen="isCenterOpen" @close="isCenterOpen = false">
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>

    <MbscPopup display="bottom" :isOpen="isBottomOpen" @close="isBottomOpen = false">
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>
  </MbscPage>
</template>

<style>
/* style */
</style>
```

## Implementation notes

- `display` accepts four values: `'top'` (slides down from the top edge), `'bottom'` (slides up from the bottom edge), `'center'` (pops up centered with a scale/fade animation), and `'anchored'` (positions relative to a DOM element rather than the viewport).
- Default `display` is theme-dependent: `'bottom'` for the iOS theme, `'center'` for Material/Windows and other themes - set `display` explicitly to override the theme default.
- `display: 'anchored'` requires an `anchor` value (a DOM element) to position against; without a valid `anchor` the popup has nothing to attach to. In JS/jQuery, `anchor` is set as a plain DOM element reference in the options object (JS: `anchor: document.getElementById('trigger-btn')`; jQuery: `anchor: $('#trigger-btn')[0]`); React/Vue instead track the anchor element in state (captured from a `ref`, e.g. via `buttonRef.current.nativeElement`) and bind it as the `anchor`/`:anchor` prop.
- `touchUi` (shown per-mode in this demo) controls whether the popup renders touch-optimized (mobile-style) or desktop-style controls independent of `display`; it can be combined with any of the four `display` modes.
- Framework binding for `display`/`touchUi`: React passes them as `display`/`touchUi` props on `<Popup>`; Vue as `display`/`:touchUi` on `<MbscPopup>`; Angular as a plain `display="..."` attribute plus `[touchUi]="..."` binding on `<mbsc-popup>`; JS/jQuery pass both inside the `.popup({ display: '...', touchUi: ... })` options object.
- Opening each mode is imperative in JS/jQuery: each display mode is a separate popup instance - JS captures it directly from the return value of `mobiscroll.popup('#id', {...})`, jQuery instead calls `$('#id').mobiscroll().popup({...}).mobiscroll('getInst')` - and its trigger button's click handler calls that instance's `.open()`. React binds each mode's visibility to its own boolean state variable through the `isOpen` prop, set to `true` by the corresponding trigger button's `onClick` and reset to `false` in `onClose`.
- `buttons: ['ok', 'cancel']` renders the predefined confirm/dismiss buttons in the popup footer for every display mode in this demo.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Opening closing the popup](https://demo.mobiscroll.com/vue/popup/showing-the-popover.md) - Vue popup & modal that can be used for various supporting roles, like event/add edit dialogs, info boxes & more.
- Next: [Configure buttons](https://demo.mobiscroll.com/vue/popup/button-configuration.md) - Vue popup component with different button configurations. Use it with or without buttons. Add custom actions.