- 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 Popup using JavaScript
Description
You can open and close the popup by using the JavaScript code. You can use the popup(popup) method to open the popup modal and closeModal(popup) method to close the popup modal.
Example
The following example displays the popup when you click on the links by using JavaScript in Framework7 −
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>Popup using JavaScript</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> </head> <body> <div class = "views"> <div class = "view view-main"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "center sliding">Popup using JavaScript</div> </div> </div> <div class = "pages"> <div data-page = "index" class = "page navbar-fixed"> <div class = "page-content"> <div class = "content-block"> <p><a href = "#" class = "first_page">Open First Page</a></p> <p><a href = "#" class = "second_page">Open Second Page</a></p> </div> </div> </div> </div> </div> </div> <div class = "popup popup-first_page"> <div class = "content-block"> <p>First Page</p> <p> <a href = "#" class = "close-popup">Close popup</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, pellentesque nec metus id, congue elementum odio.</p> </div> </div> <div class = "popup popup-second_page"> <div class = "content-block"> <p>Second Page</p> <p> <a href = "#" class = "close-popup">Close popup</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, pellentesque nec metus id, congue elementum odio.</p> </div> </div> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script> // Here you can initialize the app var myApp = new Framework7(); // If your using custom DOM library, then save it to $$ variable var $$ = Dom7; // Add the view var mainView = myApp.addView('.view-main', { // enable the dynamic navbar for this view: dynamicNavbar: true }); //It will open popup when you click the link with class 'first_page' $$('.first_page').on('click', function() { myApp.popup('.popup-first_page'); }); //It will open popup when you click the link with class 'second_page' $$('.second_page').on('click', function() { myApp.popup('.popup-second_page'); }); </script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as popup_using_javascript.html file in your server root folder.
Open this HTML file as http://localhost/popup_using_javascript.html and the output is displayed as shown below.
When you click on the first option, a popup window is opened and the first page is displayed to you and a popup is opened and closed using javascript code.
Similarly, when you click on the second option, the popup window for the secondpage is displayed.
You can click on close popup link to close the popup window.