Blaze UI es un marco de código abierto de CSS. Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Modals se crean para mostrar algunas actualizaciones importantes o detalles de algún evento nuevo. Los modales llaman la atención de los usuarios inmediatamente ya que el modal oculta el contenido principal de la página web. El usuario tiene que tomar medidas o descartarlas según el modal.
- Atributos modales de la interfaz de usuario de Blaze : en los modales de la interfaz de usuario de Blaze hay 4 atributos diferentes que desempeñan diferentes roles para los modales.
- Métodos modales de la interfaz de usuario de Blaze : hay tres métodos diferentes que funcionan en los modales: mostrar, cerrar e isOpen.
- Tipos modales de Blaze UI: Hay 4 tipos de modales en Blaze Ui Modals Basic Modal, Ghost Modal, Scrollable.
Sintaxis : cree un modal de la siguiente manera:
<blaze-modal open dismissible> <!-- Content --> </blaze-modal>
Ejemplo 1 : En el siguiente ejemplo, tenemos un modal simple en nuestra página web que se abre o cierra con un clic de botón.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Modals</strong>
<br /><br />
<button onclick="openModal()"
class="c-button c-button--success">
Open Modal
</button>
</center>
<blaze-modal id="gfgmodal" open dismissible>
<blaze-card>
<blaze-card-header>
<h2>Welcome to GeeksforGeeks</h2>
</blaze-card-header>
<blaze-card-body>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</blaze-card-body>
<blaze-card-footer>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
<button onclick="closeModal()" class=
"c-button c-button--error c-button--ghost">
Close Modal
</button>
</blaze-card-footer>
</blaze-card>
</blaze-modal>
</div>
<script>
const openModal = () => {
document.getElementById('gfgmodal').show();
}
const closeModal = () => {
document.getElementById('gfgmodal').close();
}
</script>
</body>
</html>
Producción:
Ejemplo 2 : En el siguiente ejemplo, tenemos un modal de pantalla completa.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Modals</strong>
<br /><br />
<button onclick="openModal()"
class="c-button c-button--success">
Open Modal
</button>
</center>
<blaze-modal id="gfgmodal" open full>
<blaze-card>
<blaze-card-header>
<h2>Welcome to GeeksforGeeks</h2>
</blaze-card-header>
<blaze-card-body>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</blaze-card-body>
<blaze-card-footer>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
<button onclick="closeModal()" class=
"c-button c-button--error c-button--ghost">
Close Modal
</button>
</blaze-card-footer>
</blaze-card>
</blaze-modal>
</div>
<script>
const openModal = () => {
document.getElementById('gfgmodal').show()
}
const closeModal = () => {
document.getElementById('gfgmodal').close()
}
</script>
</body>
</html>
Producción:
Ejemplo 3: En el siguiente ejemplo, vamos a crear un modal fantasma. Un modal fantasma no tiene ningún fondo o fondo transparente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Modals</strong>
<br /><br />
<button onclick="openModal()"
class="c-button c-button--success">
Open Modal
</button>
</center>
<blaze-modal id="gfgmodal" open ghost>
<h2>Welcome to GeeksforGeeks</h2>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
<button onclick="closeModal()" class=
"c-button c-button--error c-button--ghost">
Close Modal
</button>
</blaze-modal>
</div>
<script>
const openModal = () => {
document.getElementById('gfgmodal').show()
}
const closeModal = () => {
document.getElementById('gfgmodal').close()
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/objects/modals/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA