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.
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.
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.
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.
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.
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.
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.
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.
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.
We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.
In case you fail to verify the account, the trial will be interrupted.
If you have any trouble
Don't hesitate to let us know.
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.
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
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.
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.
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.