Popup for Angular
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
Angular and Ionic Popup
Popup for Angular and Ionic Framework
Popup for Angular and Ionic Framework
Change the theme setting here
Switch the layout between mobile & desktop
and see how it looks.
Change the language and localization settings here
Popup - Opening closing the popup
Popup - Understanding display modes
The popup has four built-in display modes that can be controlled through the display option:
top- popup that slides down from the topbottom- popup that slides up from the bottomcenter- popup that shows up in the middle with a pop animationanchored- 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.
Popup - Configure buttons
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:
okfor confirmationcancelto dismiss the popupclosefor closing the popup without actionsetfor saving or applying changes
You can add custom buttons with tailored text, style, and functionality if you have more specific needs.
Popup - Responsive
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: 0pxsmall- min-width: 576pxmedium- min-width: 768pxlarge- min-width: 992pxxlarge- min-width: 1200px- use
customfor setting a custombreakpoint
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.
Popup - Event creation modal
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.
Popup - Using as a tooltip
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.
Popup - Range picker with presets
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.
Popup - Theming capabilities
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
lightanddarkvariant. Setting thethemeVariantto'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
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.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try in a starter app or see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try in a starter app or see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try in a starter app or see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try in a starter app or see how they look in your project.
Give the components a try locally and see how they look in your project.
Give the components a try locally and see how they look in 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.
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.
Grab the relevant parts and drop them into your JS, HTML and CSS files.
Reload your application in your favorite browser
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
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.
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.
Grab the relevant parts and drop them into your JS, HTML and CSS files.
Reload your application in your favorite browser
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
You will be able to configure Mobiscroll with ease in your app with the CLI
Copy command $ npm install -g @mobiscroll/cli
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.
Grab the relevant parts and drop them into your JSX and CSS files.
Run $ npm start in the root folder of your app
Copy command $ npm start
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
You will be able to configure Mobiscroll with ease in your app with the CLI
Copy command $ npm install -g @mobiscroll/cli
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.
Grab the relevant parts and drop them into your TSX and CSS files.
Run $ ionic serve in the root folder of your app
Copy command $ ionic serve
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
You will be able to configure Mobiscroll with ease in your app with the CLI
Copy command $ npm install -g @mobiscroll/cli
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.
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.
Run $ ng serve in the root folder of your app
Copy command $ ng serve
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
You will be able to configure Mobiscroll with ease in your app with the CLI
Copy command $ npm install -g @mobiscroll/cli
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.
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.
Run $ ionic serve in the root folder of your app
Copy command $ ionic serve
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
You will be able to configure Mobiscroll with ease in your app with the CLI
Copy command $ npm install -g @mobiscroll/cli
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.
Grab the relevant parts and drop them into your Vue page.
Run $ npm run dev in the root folder of your app
Copy command $ npm run dev
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
You will be able to configure Mobiscroll with ease in your app with the CLI
Copy command $ npm install -g @mobiscroll/cli
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.
Run $ npm run dev in the root folder of your app
Copy command $ npm run dev
And voilà, everything should be running smoothly.
Check out these common errors and solutions or reach out and let us help you.
We have to set you up with a trial for this to run 👍
Your password has been changed!