Onsen UI CSS Component Basic Modal
Onsen UI is a free open-source HTML5 framework that enables you to design user interfaces that are original and functional (UI). It also makes UI creation easier, freeing up programmers to focus on the functionality of the application. With a wealth of ready-to-use features that follow native iOS and Android design standards, Onsen UI is a comprehensive collection of user interface elements made specifically for mobile apps. Onsen UI can be used with any other framework, including jQuery, even though it was created to work with AngularJS. For PhoneGap and Cordova, Onsen UI is a JavaScript Framework.
Onsen UI provides the pre-built CSS components for fast designing versatile and appealing user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UI’s easier for developers.
A Basic Modal is a type of pop-up window that can be used to show some information or display a message. It mostly is used to give feedback about the activity of the user.
Onsen UI CSS Component Basic Modal Classes:
- modal: This class is added to the container that holds the modal.
- modal__content: This class is added to the container that encloses the whole modal’s content.
Syntax:
<div class="modal"> <div class="modal__content"> Modal's Content </div> </div>
Example 1: The below example demonstrate how to add a basic modal to a webpage using Onsen UI.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < link rel = "stylesheet" href = "https://unpkg.com/onsenui/css/onsenui.css" /> < link rel = "stylesheet" href = "https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 style = "font-style: bold;" > Onsen UI CSS Component Basic Modal </ h3 > < br > </ center > < div class = "modal" > < div class = "modal__content" > < div style="height: 200px; width: 600px; margin-left: 3.5rem;"> < div class = "card" > < h2 class = "card__title" style="color: green; text-align: center;"> w3wiki </ h2 > < div class = "card__content" > A Computer Science portal for Beginner. Gain and share your knowledge & skills with a variety of learning platforms offe red by w3wiki. Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. We provide a variety of services for you to learn, thrive and also have fun! </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In the example, some simple JavaScript logic is used to create a button that will open or close the modal.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < link rel = "stylesheet" href = "https://unpkg.com/onsenui/css/onsenui.css" /> < link rel = "stylesheet" href = "https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> < script src = "https://unpkg.com/onsenui/js/onsenui.min.js" > </ script > < script src = "https://code.jquery.com/jquery-3.6.0.min.js" > </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 style = "font-style: bold;" > Onsen UI CSS Component Basic Modal </ h3 > < br > < button class = "button" onclick = "showModal()" > Open the modal. </ button > </ center > < div class = "modal" > < div class = "modal__content" > < div style="height: 200px; width: 600px; margin-left: 5.5rem;"> < div class = "card" > < h2 class = "card__title" style="color: green; text-align: center;"> w3wiki </ h2 > < div class = "card__content" > A Computer Science portal for Beginner. Gain and share your knowledge & skills with a variety of learning platforms offered by w3wiki. Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. We provide a variety of services for you to learn, thrive and also have fun! </ div > < button onclick = "closeModal()" class = "action-sheet-button" > < i class = "ion-ios-close" ></ i > Close </ button > </ div > </ div > </ div > </ div > < script > $('.button').hide() function closeModal() { $('.modal').hide() $('.button').show() } function showModal() { $('.modal').show() $('.button').hide() } </ script > </ body > </ html > |
Output
Reference: https://onsen.io/v2/api/css.html#modal-category
Contact Us