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.