Updated on Nov 12, 2024

Popup for Vue

The popup provides a frame for all your pop-over needs able to render custom content, forms or combined views.

Use it for contextual pop-ups, data-entry or to inform users in a consistent way with all other Mobiscroll component.

Shipping with useful features for a refined UX, including:

  • Usage on mobile and desktop
  • Combined views for various components
  • Initialization on any custom content
  • Consistent styling with all components
  • Flexible button API
  • Full theming support with light & dark variants
  • Modal, popup, bubble and top/bottom display
  • RTL Support
  • Button localization

Vue Popup Popup for Vue JS

Select the theme
iOS
Material
Windows
Auto-theme
Usage theme: ''
You can turn auto theming on and let it decide based on the platform
Select light or dark mode
Light
Dark
Auto-theme-variant
Usage themeVariant: ''
You can turn auto dark mode on based on system settings
Select touch or pointer interaction
Mobile
Desktop
Usage touchUi:
Use touch interaction on mobile or pointer interaction on desktop

Switch the layout between mobile & desktop
and see how it looks.

Select the locale
Usage locale:
Selecting the locale loads the localized settings and translated UI microcopy

Popup - Opening closing the popup

Change demo

Use the popup to render any content or form in a modal box that can be programmatically shown or hidden. For that the open and close methods can be used.

To check whether the popup is opened or not, use the isVisible method.

Popup - Understanding display modes

Change demo

The popup has four built-in display modes that can be controlled through the 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 →

Popup - Configure buttons

Change demo

You can display the popup without any buttons for a clean, minimal interface, use predefined buttons for standard actions, or customize it by adding your own buttons with tailored text, style, and functionality to meet your specific needs.

By default, the popup is displayed without any buttons for a clean, minimal look. If you want some standard actions you can use the following predefined buttons:

  • ok for confirmation
  • cancel to dismiss the popup
  • close for closing the popup without action
  • set for saving or applying changes

You can add custom buttons with tailored text, style, and functionality if you have more specific needs.

Popup - Responsive

Change demo

The popup component adapts fluidly to its environment. There are times however when you would like to set the component up responsively.

Use the responsive option to configure the popup and change the options based on the viewport width. There are five predefined breakpoints:

  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
  • use custom for setting a custom breakpoint

It is a good idea to adjust the display to tailor the UX. This allows you to have the popup bottom-positioned on mobile devices, centered on tablets, and anchored to input on larger screens to enhance the user experience.

Change the viewport

Popup - Event creation modal

Change demo

Use the popup to show a modal with an add/edit form for event creation and/or update. The popup can be easily set up to be shown right in the middle of the screen, top, bottom or anchored to the newly added event. Check out the different display modes and play around with the different configurations.

You have full control over what is shown within the popup. Use Mobiscroll form elements or any components that you are already using throughout your application.

Interested in exploring the event calendar?  Check out these examples →
Preview in fullscreen
Javascript jQuery Angular React Vue
Copy code
View SFC JS code on GitHub View SFC TS code on GitHub 
<!-- Code not available for Vue -->

Popup - Using as a tooltip

Change demo

Use the popup as a tooltip that gives a quick glance at more event details than just the labels. This approach is perfect for providing access to information without cluttering the interface.

The popup takes care of auto-positioning, taking the guesswork out of where it should show up. It also gives you full control over the content where you can use any Mobiscroll or custom component.

Looking for more advanced event tooltip ideas?  Check out this example →
Preview in fullscreen
Javascript jQuery Angular React Vue
Copy code
View SFC JS code on GitHub View SFC TS code on GitHub 
<!-- Code not available for Vue -->

Popup - Range picker with presets

Change demo

Build complex pickers to show within popups to make things easy for your users. A great example is date-range selection with presets. If you've ever used Google Analytics, you have probably seen the date range selector for filtering the data, which is very similar to what you can see in this example. Select custom start and end dates along with presets is helpful for easy access to predefined ranges that people are usually interested in.

Would like to explore more date & time picker functionality?  Check out the range examples we have for you →
Preview in fullscreen
Javascript jQuery Angular React Vue
Copy code
View SFC JS code on GitHub View SFC TS code on GitHub 
<!-- Code not available for Vue -->

Popup - Theming capabilities

Change demo

The look and feel of the popover can be deeply customized. There are four levels of customization:

  • Base themes: Choose between iOS, Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Popup - Lifecycle events

Change demo

The popover ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like onInit, onOpen, onPosition ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →
Change the viewport

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Already have an account?
Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery and jQuery Mobile
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this. 

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file 

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config react

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config angular

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's style.css or style.scss.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's global.scss file.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Vue project

Run the following command in the root folder of your Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config vue

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Ionic Vue project

Run the following command in the root folder of your Ionic Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Theme Select
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos