Popup Screens
Keep users engaged during downtime with playful, creative, and informative maintenance experiences.
01Directional Popups (Modals)
Bootstrap UIBasic Default
The classic standard modal with backdrop auto-dismiss and perfect padding.
Static Backdrop
Protects users from accidental dismissals. Requires explicit close action.
Scrolling Content
Constrains extreme content height and introduces a native inner scrollbar.
Vertically Centered
Creates a perfectly balanced, distraction-free aesthetic in the viewport center.
Toggle Between
Showcases switching between multiple modals dynamically, hiding the first.
Tooltips & Popovers
Demonstrating native Bootstrap tooltips functioning perfectly inside modals.
Grid Forms & Content
Leverages the responsive grid system for complex modal layouts.
Fullscreen Takeover
Completely immerses the user by filling the viewport. Great for media.
Varied Sizing (XL, SM)
Optional dimensional modifiers like extra-large, large, and small.
Save Changes
Are you sure you want to save the latest configuration? The UI will update instantly and a notification will be triggered.
Irreversible Action
You are about to delete your entire workspace. Because this has a static backdrop, clicking outside will not close it.
Terms and Conditions
1. Introduction
Welcome to our platform. By accessing our services, you agree to these terms. Please read them carefully.
2. Subscription Rules
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id sagittis libero. Maecenas iaculis libero eu metus mattis posuere. Ut tristique, tortor vitae egestas eleifend, massa purus venenatis dui, ullamcorper fringilla risus nisl at odio.
Nullam in tempor metus. Maecenas sed dui vitae elit sodales elementum eget ut nibh. Curabitur vel tortor diam. Donec dictum risus non elit tempus imperdiet. Fusce ultrices, arcu ac sollicitudin dignissim, magna mauris pharetra nisi, nec scelerisque neque lacus eu nisl.
3. Termination
We reserve the right to terminate access for standard violations. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean dignissim libero vel luctus finibus.
Integer tempor scelerisque placerat. Vestibulum ut nunc quis nisl malesuada pretium sed mattis lacus. Sed dapibus nisi ac ipsum tincidunt ultrices. Morbi in est a ante dictum sollicitudin eget ac libero. Vivamus quis magna neque. Ut at urna eget nunc euismod congue sed tristique augue.
Etiam aliquet libero augue, non semper tortor commodo dignissim. Nunc euismod nunc purus, dignissim cursus velit placerat a. Proin laoreet felis nec lectus facilisis porta. Morbi non libero accumsan lectus finibus volutpat sed ut justo.
Go Premium
Unlock to get access to advanced dashboard analytics and custom exports.
Choose a Plan
Step 1: Introduction
This presents the first modal in a multi-step sequence. Clicking the button below will automatically hide this modal and fade in the next one.
Step 2: Conclusion
You successfully transitioned to the second modal! You can either close out completely or toggle back to Step 1.
Tooltips in Modals
Popover Example
You can easily place click me for popover within a modal body. It will intuitively position itself based on the modal z-index.
Tooltips Example
Native tooltips also work securely. Just hover over this link or this one to see how they render.
Add New Contact (Grid Form)
Leverage the responsive column grid naturally aligned inside the modal wrapper.
Media Workspace
Immersive View
Fullscreen modals eliminate all background distractions, creating the perfect UI layer for image galleries, video players, and expansive data maps.
Extra Large Canvas (XL)
Primary Action Area
With modal-xl, you get an extraordinarily wide area spanning up to 1140px on large screens. Perfect for intricate dashboards, split-pane forms, and dense data tables.
Configuration
- Enable API
- Push Webhooks