Onsen UI is a cutting-edge and useful HTML5 framework that is freely used. It makes UI development simpler so that app developers may concentrate on the software’s functionality. Onsen UI is a fantastic resource because it offers a vast variety of premium UI elements created specifically for mobile apps and loaded with features that adhere to native iOS and Android design standards. Although Onsen UI is designed to work with AngularJS, it may easily be applied to jQuery or any other framework. Using PhoneGap and Cordova, the Onsen UI JavaScript framework was developed.
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 UIs easier for developers.
Onsen UI’s Basic Dialog is a basic modal type dialog that is used to display any type of information. The dialog can also contain other CSS Components like switches, radio buttons, etc.
Onsen UI CSS Component Basic Dialog Used Classes:
- dialog: This class is added to all the elements which will be considered as the dialog.
- dialog-container: This class is added to the container which will be considered as the container holding the dialog.
- dialog-mask: This class is used to add a mask over the whole page around that dialog.
Syntax:
<div class="dialog-mask"></div>
<div class="dialog">
<div class="dialog-container">
<p>...</p>
</div>
</div>Example 1: The code below demonstrates the implementation of a dialog using Onsen UI.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div style="margin:3rem;
font-family:Roboto, sans-serif;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3 style="margin-top:-1.5rem;">
Onsen UI CSS Component Basic Dialog
</h3>
</div>
<div class="dialog-mask"></div>
<div class="dialog">
<div class="dialog-container">
<p style="text-align:center;
margin-top:40px;
opacity:0.4;">
Hi Geek!! This is a basic Dialog
</p>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The below example demonstrates how you can add other CSS components to a dialog such as a material switch.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div style="margin:3rem;
font-family:Roboto,sans-serif;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3 style="margin-top:-1.5rem;">
Onsen UI CSS Component Basic Dialog
</h3>
</div>
<div class="dialog-mask"></div>
<div class="dialog">
<div class="dialog-container">
<p style="text-align:center;
margin-top:40px;
opacity:0.4;">
Hi Geek!! This is a basic Dialog
</p>
<label class="switch switch--material" style="float:right;
margin-right:2rem;
margin-bottom:1rem;">
<input type="checkbox"
class="switch__input
switch--material__input">
<div class="switch__toggle
switch--material__toggle">
<div class="switch__handle
switch--material__handle">
</div>
</div>
</label>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#dialog-category