Spectre Modals son indicaciones de diálogo flexibles, 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 activación. Sin embargo, al hacer clic en el fondo del modal se cierra automáticamente el modal.
También podemos definir el tamaño del modal usando Spectre Modal tamaños , para crear un modal primero necesita usar la clase modal y luego debe mencionar el tamaño modal como modal-sm denota modal de tamaño pequeño.
Tipos modales de espectro:
- Spectre Modal: Esto se usa para crear un modal predeterminado que contendrá todo el contenido del modal.
- Tamaños de Spectre Modal: Esto se usa para crear el mismo modal predeterminado con diferentes tamaños.
Clases modales de espectro:
- modal: esta clase se utiliza para crear modales.
- modal-container: esta clase se usa para definir el contenedor modal que contiene todo el contenido del modelo.
- superposición modal: esta clase se utiliza para crear un diseño modal.
- modal-header: esta clase se utiliza para definir la sección de encabezado del modal.
- modal-title: esta clase se usa para definir el título del modal que viene debajo de la clase de encabezado del modal.
- modal-body: esta clase se utiliza para definir la sección del cuerpo del modal.
- modal-footer: esta clase se utiliza para definir la sección de pie de página del modal.
Sintaxis: Todas las clases se mencionan en esta sintaxis.
<div class="modal modal-size-class">
<a href="#" class="modal-overlay"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#"></a>
<div class="modal-title">..</div>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
Los siguientes ejemplos ilustran el Spectre Modal:
Ejemplo 1: En este ejemplo, crearemos un modal regular.
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</strong> </center> <br><br> <div class="modal 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 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:
Modales de espectro
Ejemplo 2: En este ejemplo, crearemos el modal grande .
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 style="color: green">GeeksforGeeks</h1>
<strong>SPECTRE Modal</strong>
<br><br>
<button onclick="openModal()">Open Modal</button>
</center>
<br>
<div class="modal modal-lg">
<a href="#close" class="modal-overlay"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#close" onclick="closeModal()"
class="btn btn-clear float-right">
</a>
<div class="modal-title h5">
Geeksforgeeks
</div>
<p>This is a large 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>
<script>
let modalElement = document.querySelector(".modal");
function openModal() {
// Add the "active" class for opening the Modal
modalElement.classList.add("active");
}
function closeModal() {
// Remove the "active" class for closing the Modal
modalElement.classList.remove("active");
}
</script>
</body>
</html>
Producción:
Referencia: https://picturepan2.github.io/spectre/components/modals.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA