Onsen UI es un marco HTML5 gratuito de código abierto que le permite diseñar interfaces de usuario originales y funcionales (UI). También facilita la creación de la interfaz de usuario, liberando a los programadores para que se concentren en la funcionalidad de la aplicación. Con una gran cantidad de funciones listas para usar que siguen los estándares de diseño nativos de iOS y Android, la interfaz de usuario de Onsen es una colección integral de elementos de interfaz de usuario creados específicamente para aplicaciones móviles. La interfaz de usuario de Onsen se puede usar con cualquier otro marco, incluido jQuery, aunque se creó para funcionar con AngularJS. Para PhoneGap y Cordova, la interfaz de usuario de Onsen es un marco de JavaScript.
Onsen UI proporciona los componentes CSS preconstruidos para diseñar rápidamente diseños de interfaz de usuario versátiles y atractivos.
Onsen UI Modal CSS Components es un rodillo temático Topcoat basado en la web para desarrolladores móviles que facilita la creación de una hermosa interfaz de usuario para los desarrolladores.
Sintaxis:
<element-name class="modal-class-name">...</element-name>
Clases utilizadas:
- modal: esta clase se agrega al contenedor que contiene el modal.
- modal__content: esta clase se agrega al contenedor que encierra todo el contenido del modal.
Ejemplo 1: el siguiente ejemplo muestra cómo agregar un modal básico a una página web utilizando la interfaz de usuario de Onsen.
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;"> GeeksforGeeks </h1> <h3 style="font-style: bold;"> Onsen UI Modal CSS Components </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;"> GeeksforGeeks </h2> <div class="card__content" style="text-align: center;"> A Computer Science portal for geeks. </div> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra cómo agregar un modal básico a una página web utilizando la interfaz de usuario de Onsen especificando el interruptor para cerrar el 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;">
GeeksforGeeks
</h1>
<h3 style="font-style: bold;">
Onsen UI Modal CSS Components
</h3>
<br>
<button class="button"
onclick="showModal()">
Click here!!
</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;">
GeeksforGeeks
</h2>
<div class="card__content"
style="text-align: center;">
A Computer Science portal for geeks.
</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>
Producción:
Referencia: https://onsen.io/v2/api/css.html#modal-category