Framework7 - Overlay Modal

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.

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	-

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