Framework7 - Overlay Popup


Advertisements

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.

framework7_overlays.htm
Advertisements