- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Overlay Popup
Description
Popup is a popup box, which displays the content, when the user clicks on the element by using the popup class.
The size of the popup varies on different devices. On phones, it will display fullscreen and on tablets, it will display with 630px width and height. You can add tablet-fullscreen class to make fullscreen size on tablets.
You can open and close the popup in two ways as specified in the following table −
| S.No | Type |
|---|---|
| 1 | From HTML
You can open and close the popup by using classes and data attributes. |
| 2 | Using JavaScript
You can open and close the popup by using the JavaScript code. |
Popup Events
| S.No | Event | Target & Description |
|---|---|---|
| 1 | open | Popup Element When you open an animation, this event will get fired. |
| 2 | opened | Popup Element When the opening of an animation is completed, this event will get fired. |
| 3 | close | Popup Element When you close an animation, this event will get fired. |
| 4 | closed | Popup Element When the closing of an animation is completed, this event will get fired. |
You can also create a dynamic popup by using its HTML to App methods. Here is an example.