El componente Spectre Modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual, una vez que se hace clic en el botón de disparo. Sin embargo, al hacer clic en el fondo del modal se cierra automáticamente el modal.
En este artículo, aprenderemos a crear modales de diferentes tamaños . Para crear un modal, primero debe usar la clase modal, luego debe mencionar el tamaño modal como modal-sm denota modal de tamaño pequeño.
Tamaños modales Spectre Clases:
- modal-sm: esta clase se usa para crear un modal de tamaño pequeño, el ancho máximo del contenedor modal es 320px .
- modal-lg: esta clase se usa para crear un modal de gran tamaño, el ancho máximo del contenedor modal es 960px .
Nota: Si no se define el tamaño modal, solo se menciona la clase modal, entonces será el modal de tamaño predeterminado, es decir, el tamaño mediano.
Sintaxis:
<div class="modal modal-sm"> <a href="#" class="modal-overlay"></a> <div class="modal-container"> .... </div> </div>
El siguiente ejemplo ilustra los tamaños de Spectre Modal:
Ejemplo: en este ejemplo, crearemos un modal de tamaño pequeño. Tenga en cuenta que el botón de cierre no responderá debido a que falta la funcionalidad de JavaScript.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>SPECTRE Modal size Class</strong> </center> <br><br> <div class="modal modal-sm active"> <a href="#close" class="modal-overlay"></a> <div class="modal-container"> <div class="modal-header"> <a href="#close" class="btn btn-clear float-right"> </a> <div class="modal-title h5"> Geeksforgeeks </div> <p>This is a small Modal </div> <div class="modal-body"> <div class="content"> <p> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials. </p> </div> </div> <div class="modal-footer"> A Computer science Portal for Geeks </div> </div> </div> </body> </html>
Producción:
Espectro Tamaños modales
Referencia: https://picturepan2.github.io/spectre/components/modals.html#modals-sizes
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA