Solo CSS ventana modal estática
| Autor: | codeshackio |
|---|---|
| Views Total: | 1,086 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 11, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otra solución CSS para crear ventanas modales estilo bootstrap que cargan contenido de HTML en línea.
Funcionamiento
Coloque el archivo CSS principal ' modal. css ' en el encabezado del documento.
<link href="modals.css" rel="stylesheet">
Cree el contenido modal.
<div class="modal"> <div class="modal-header"> <h3>Modal Title</h3> <label for="modal"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAABNTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU0N3NIOAAAAJnRSTlMAAQIDBAUGBwgRFRYZGiEjQ3l7hYaqtLm8vsDFx87a4uvv8fP1+bbY9ZEAAAB8SURBVBhXXY5LFoJAAMOCIP4VBRXEv5j7H9HFDOizu2TRFljedgCQHeocWHVaAWStXnKyl2oVWI+kd1XLvFV1D7Ng3qrWKYMZ+MdEhk3gbhw59KvlH0eTnf2mgiRwvQ7NW6aqNmncukKhnvo/zzlQ2PR/HgsAJkncH6XwAcr0FUY5BVeFAAAAAElFTkSuQmCC" width="16" height="16" alt=""> </label> </div> <p>Modal Content</p> </div>
Cree la superposición de fondo de la ventana modal.
<label for="modal" class="modal-background"></label>
Cree un elemento de desencadenador para alternar la ventana modal. Hecho.
<input type="checkbox" id="modal"> <label for="modal" class="example-label">Open Modal</label>
