- 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 Dynamic Picker Modal
Description
You can also create a dynamic picker modal by using it's HTML to App methods. It uses two parameters −
pickerHTML − It contains string element of picker modal.
removeOnClose − It includes boolean value, which will be removed from DOM when you close the Picker. By default, it includes the true value.
Example
The following example demonstrates the use of dynamic picker modal 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>Dynamic Picker Modal</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">Dynamic Picker Modal</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="create-modal-picker">Open Picker</a></p> <p><a href="#" class="close-picker">Close Picker</a></p> </div> </div> </div> </div> </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 }); $$('.create-modal-picker').on('click', function () { //Here you can check whether we have already opened picker or not if ($$('.picker-modal.modal-in').length > 0) { myApp.closeModal('.picker-modal.modal-in'); } myApp.pickerModal( '<div class="picker-modal">' + '<div class="toolbar">' + '<div class="toolbar-inner">' + '<div class="left"></div>' + '<div class="right"><a href="#" class="close-picker">Ok</a></div>' + '</div>' + '</div>' + '<div class="picker-modal-inner">' + '<div class="content-block">' + '<p>Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.</p>' + '</div>' + '</div>' + '</div>' ) }); </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 picker_modal_dynamic.html file in your server root folder.
Open this HTML file as http://localhost/picker_modal_dynamic.html and the output is displayed as shown below.
framework7_overlays.htm
Advertisements