Framework7 - Overlay Modal


Advertisements

Description

Modal is a small window that displays the content from a separate source without leaving the parent window.

There are different types of modals available in Framework7 as specified in the following table −

S.No Modal Type & Description
1 Alert

It displays the alert modal.

2 Confirm

Confirm modal is used to confirm some action for the displayed content.

3 Prompt

Prompt modal allows the users to take some actions.

4 Login and Password

This type of modal is used for authentication.

5 Nesting Modals

You can use one modal inside another modal.

6 Preloader Modal

Preloader modal defines the background action and stops the user actions during this action.

7 Indicator

Indicator modal specifies small indication activity like preloader modal for the user actions.

Custom Modals

The following table shows the list of Modal parameters −

S.No Parameter & Description Type Default
1

title

Its an optional parameter that defines the string with the modal title.

string -
2

text

Its an optional parameter that defines the string with the modal text.

string -
3

afterText

Its an optional parameter that defines the string after the text.

string
4

buttons

Its an optional parameter that contains an array of buttons and each button is specified with the button parameter as object.

array -
5

verticalButtons

Its an optional parameter, which specifies the vertical buttons by setting it to true.

boolean false
6

onClick

Its an optional parameter that executes the callback function when the user clicks the modal button.

function -

The following table lists the Button's parameters −

S.No Parameter & Description Type Default
1

text

Its an optional parameter that defines the string with the button's text.

string -
2

bold

Its an optional parameter, which makes the text bold by setting it to true.

boolean false
3

close

Its an optional parameter, which will close the modal when you click on the button if it is set to true.

boolean true
4

onClick

Its an optional parameter that executes the callback function when the user clicks on the button.

function -

Modal Events

The following table shows a list of the Modal events −

S.No Event Target & Description
1 open

Modal Element

When you open an animation, this event will get fired.

2 opened

Modal Element

When opening of an animation is complete, this event will get fired.

3 close

Modal Element

When you close an animation, this event will get fired.

4 closed

Modal Element

When closing of an animation is complete, this event will get fired.

framework7_overlays.htm
Advertisements