W3.CSS modal
Un modal es una ventana de cuadro de diálogo / emergente que aparece en la parte superior de la página actual:
Cómo crear un modal
Ejemplo
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> Inténtalo tú mismo " La clase "W3-modal"
Un modal puede ser cualquier contenedor HTML (como un <div>) con class = "w3-modal".
La Clase "-modal-W3 contenido"
Todo el contenido modal debe ser colocado en un contenedor HTML con class = "w3-modal en contenido".
contenido modal puede ser cualquier elemento HTML (encabezamientos, párrafos, imágenes, etc.)
Abrir un modal
Utilizar cualquier elemento HTML para abrir el modal. Esto es a menudo un botón o un enlace.
Añadir el atributo onclick y apuntan a la identificación de la modal (ID01 en nuestro ejemplo), utilizando el método document.getElementById () y especificar un identificador único que coincide con el botón "disparador" (ID01).
El cierre de una Modal
Para cerrar un modal, añadir la clase W3-closebtn a un elemento, junto con un atributo onclick que apunta a la identificación de la modal (ID01). También puede cerrarla haciendo clic fuera de la modal (véase el ejemplo siguiente).
 | &veces; (X) es una entidad HTML que es el icono preferido para los botones de cerrar, en lugar de la letra "x". |
|---|
Modal Encabezado y pie
Dentro de los <div> con class = "-modal-W3 contenido", clases de uso w3-contenedores para crear diferentes secciones en el modal:
Ejemplo
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div> Inténtalo tú mismo " Modal como una tarjeta
Para mostrar el modal como una tarjeta, añadir la clase w3-tarjeta- * al recipiente w3-modal-contenido:
Los modales animados
Utilice cualquiera de los w3-animado-zoom | Remate la parte inferior derecha | | clases de izquierda a deslizarse en la modal de una dirección específica:
Ejemplo
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
Inténtalo tú mismo " También puede desvanecerse en el color de fondo de la modal (W3-modal):
imagen modal
Haga clic sobre la imagen para verla en tamaño completo:
Ejemplo
<img src="img_fjords.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_fjords.jpg">
</div>
Inténtalo tú mismo " Modal Galería de imágenes
Haga clic en una imagen para verla en el tamaño completo:
Ejemplo
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Inténtalo tú mismo " Modal Formulario de acceso
En este ejemplo se crea un referente para la entrada:
modal Tab
En este ejemplo se crea un modal con el contenido con pestañas:
Cierre el modal
En los ejemplos anteriores, se utiliza un botón para cerrar el modal. Sin embargo, con un poco de JavaScript, puede también cerrar el modal cuando se hace clic fuera del cuadro de modal:
Ejemplo
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Inténtalo tú mismo "