Blaze UI es un marco de código abierto de CSS . Es un conjunto de herramientas de interfaz de usuario liviano y 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 Modal se utiliza para mostrar el contenido estructurado en forma de tarjetas. Blaze UI Ghost Modal se usa para crear el modal sin el cuerpo con algún contenido dentro usando la clase o-modal-ghost . En este artículo, discutiremos Blaze UI Ghost Modal.
Clase modal fantasma de Blaze UI:
- o-modal–ghost: esta clase se usa como clase modificadora para crear el modal fantasma.
Sintaxis:
<div aria-hidden class="c-overlay
c-overlay--visible">
</div>
<div role="dialog" class="o-modal o-modal--ghost
o-modal--visible">
....
</div>
Ejemplo 1: el siguiente ejemplo demuestra el modal fantasma de Blaze UI.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Ghost Modal </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Ghost Modal </h3> <div aria-hidden class="c-overlay c-overlay--visible"> </div> <div role="dialog" class="o-modal o-modal--ghost o-modal--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Ghost Modal </h2> </header> <div class="c-card__body"> A Computer Science portal for geeks. </div> </div> </div> </div> </body> </html>
Producción:
Modal fantasma de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente ejemplo muestra el modal fantasma de Blaze UI con una imagen y botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Ghost Modal </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Ghost Modal </h3> <div aria-hidden class="c-overlay c-overlay--visible"> </div> <div role="dialog" class="o-modal o-modal--ghost o-modal--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Ghost Modal </h2> <h4> GeeksforGeeks Image </h4> </header> <div class="c-card__body"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> </div> <footer class="c-card__footer"> <button type="button" class="c-button c-button--error"> Cancel </button> <button type="button" class="c-button c-button--success"> Submit </button> </footer> </div> </div> </div> </body> </html>
Producción:
Modal fantasma de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/objects/modals/
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA