---
title: "Vue Popup Opening closing the popup Example | Mobiscroll"
component: "Popup"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/popup/showing-the-popover"
---

# Opening closing the popup - Vue Popup demo

Vue popup & modal that can be used for various supporting roles, like event/add edit dialogs, info boxes & more. For Vue and Nuxt.

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

## Description

Use the popup to render any content or form in a modal box that can be programmatically shown or hidden. For that the [`isOpen`](https://mobiscroll.com/docs/vue/popup/api#opt-isOpen) option can be used.

To check whether the popup is opened or not, use the [`isVisible`](https://mobiscroll.com/docs/vue/popup/api#method-isVisible) method.

## What this demo shows

- This demo shows a popup which can be opened and closed with buttons.
- **Opening and closing** Buttons programmatically open and close the popup.
- **Modal layout** The popup appears as a centered modal with a custom layout and content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Close action** A Close button dismisses the popup.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.

## Best for

- **Welcome messages** Present introductory content when users enter a page or workflow.
- **Announcements** Display important updates or notices in a focused modal.
- **Confirmations** Ask users to acknowledge information or confirm an action.
- **Promotional content** Highlight a promotion with custom imagery and supporting text.
- **Custom modal interactions** Present focused content that users can dismiss before returning to the underlying page.

## Tutorial

```vue
<script setup>
  const isPopupOpen = ref(false)  
</script>

<template>
  <MbscButton @click="isPopupOpen = true">
    Open popup
  </MbscButton>
  <MbscPopup display="center" :isOpen="isPopupOpen" @close="isPopupOpen = false">
    <!-- popup content -->
    <MbscButton @click="isPopupOpen = false">
      Close
    </MbscButton>
  </MbscPopup>
</template>
```

## 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
- [`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 isPopupOpen = ref(false)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-button-group-block">
        <MbscButton @click="isPopupOpen = true">Open popup</MbscButton>
      </div>
    </div>

    <MbscPopup display="center" :isOpen="isPopupOpen" @close="isPopupOpen = 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>
      <div class="mbsc-button-group-block">
        <MbscButton @click="isPopupOpen = false">Close</MbscButton>
      </div>
    </MbscPopup>
  </MbscPage>
</template>
```

### 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 isPopupOpen = ref<boolean>(false)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-button-group-block">
        <MbscButton @click="isPopupOpen = true">Open popup</MbscButton>
      </div>
    </div>

    <MbscPopup display="center" :isOpen="isPopupOpen" @close="isPopupOpen = 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>
      <div class="mbsc-button-group-block">
        <MbscButton @click="isPopupOpen = false">Close</MbscButton>
      </div>
    </MbscPopup>
  </MbscPage>
</template>
```

## Implementation notes

- The popup is opened and closed with the `.open()` and `.close()` instance methods - there is no option that shows the popup on init; visibility is always driven by calling these methods.
- `isVisible` (a method on the popup instance) returns whether the popup is currently open, for cases where code needs to check state rather than react to the `onOpen`/`onClose` events.
- `display: 'center'` renders the popup as a centered modal (used in this demo); `showOverlay: false` removes the dimmed backdrop that normally sits behind the popup; `closeOnOverlayClick: false` prevents clicking outside the popup from dismissing it, so the `Close` button is the only way to dismiss it.
- `focusOnOpen: false` prevents the popup from auto-focusing its first focusable element when it opens.
- Opening/closing is imperative everywhere except React and Vue: JS captures the popup instance directly from the return value of `mobiscroll.popup(...)`; jQuery instead calls `.mobiscroll('getInst')` once to get it; either way, `.open()`/`.close()` is then called on it from the trigger/close buttons' click handlers. Angular keeps a template reference (`#popup`) resolved via `@ViewChild('popup') popup!: MbscPopup`, with component methods calling `this.popup.open()`/`this.popup.close()`.
- React and Vue instead bind the popup's visibility declaratively: a boolean state (`isPopupOpen`) is passed as the `isOpen`/`:isOpen` prop, the trigger button's click handler sets it to `true`, and both the popup's `onClose`/`@close` callback and the in-popup Close button's click handler set it back to `false` - there is no direct `.open()`/`.close()` call in these two frameworks for this pattern.
- Content placed inside the popup (image, heading, paragraph, Close button) is rendered as children of `<Popup>`/`<MbscPopup>`/`<mbsc-popup>` in React/Vue/Angular, or as the markup inside the target container element (`<div id="demo-popup">`) that `.popup()` is initialized on in JS/jQuery.

## 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

- Next: [Understanding display modes](https://demo.mobiscroll.com/vue/popup/mobile-desktop-display.md) - Vue popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.