- 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 Login Screen
Description
Modal is a small window that displays the content from separate source without leaving the parent window.
There are two ways to open and close the login screen in Framework7 as specified in the following table −
| S.No | Type & Description |
|---|---|
| 1 | From HTML
You can open and close the login screen using Framework7 classes. |
| 2 | Using JavaScript
You can open and close the login screen using JavaScript app methods. |
Login Screen Events
The following table shows a list of Modal events −
| S.No | Event | Target & Description |
|---|---|---|
| 1 | open | Login Screen Element When you open an animation, this event will get fired. |
| 2 | opened | Login Screen Element When the opening of an animation is completed, this event will get fired. |
| 3 | close | Login Screen Element When you close an animation, this event will get fired. |
| 4 | closed | Login Screen Element When the closing of an animation is completed, this event will get fired. |
You can create a login screen in two ways as specified in the table below −
| S.No | Type & Description |
|---|---|
| 1 | Start App With Login Screen
You can create the login screen on applicaton's first screen by using the modal-in class. |
| 2 | Embedded Login Screen
To embed a login screen, you can insert the login screen into the page. |