Las ventanas modales pueden ser un poco complicadas de poner en marcha, por lo que vamos a repasar cómo crear una ventana modal simple con solo HTML y CSS. ¡No se requiere Javascript! Por lo general, las ventanas modales se crean con JavaScript o JQuery, pero no es necesario. ¡Nuestra alternativa es simple, liviana y solo tiene alrededor de 30 líneas de código!
Índice
- 1. Configure el HTML y oculte el cuadro
- 2. Agregue activadores de apertura y cierre
- 3. Definir tamaño y posición
1. Configure el HTML y oculte el cuadro
El HTML de nuestra ventana modal y los enlaces para abrirla y cerrarla se ven así:
Modal WindowXModal Window
El div exterior representa toda la capa de la ventana modal (incluido el fondo translúcido detrás de ella). El div interno contiene el cuadro modal real que aparece en el centro de la pantalla. ¡Ese es todo el HTML requerido! Ahora echemos un vistazo al estilo de nuestra capa Modal Window:
.modalBox { position: fixed; /* create the modal window layer, and have it fill the entire screen */ top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.8); /* set the modal window layer's background color to a translucent black */ z-index: 99999; /* put the layer on top of every other layer */ opacity:0; /* make the layer invisible intially */ pointer-events: none; } 2. Agregue activadores de apertura y cierre
Toda la acción ocurrirá en :objetivo dentro de nuestro CSS, de modo que cuando nuestra capa de ventana modal se convierta en el objetivo activo (haciendo clic en el enlace para abrirlo), todos los estilos definidos allí tendrán lugar. Esto también significa que cuando la capa ya no esté orientada (al hacer clic en el vínculo de cierre), se eliminarán todos los estilos CSS definidos allí. Básicamente, nuestra extensión de clase debería verse así: sillones obelisco dedon
.modalBox:target { opacity:1; /* make the modal window layer visible */ pointer-events: auto; } 3. Definir tamaño y posición
Esto nos lleva a nuestro último fragmento de CSS, donde definimos el tamaño y la posición de la ventana. Todos esos estilos irán en una definición de CSS que se verá así:
.modalBox > div { width: 500px; /* set the window's width */ position: relative; margin: 10% auto; /* center the window horizontally */ padding: 5px; background: #fff; } ¡Pon todas esas piezas juntas y tendrás una ventana modal simple! Echa un vistazo a la demostración en vivo para verlo por ti mismo.
Consulte nuestras otras publicaciones para obtener más información interesante sobre diseño y desarrollo web, o siempre puede contactarnos para manejar sus proyectos personalizados. ¡Comenta abajo y comparte esta publicación si te resultó útil!
Cómo hacer una ventana modal simple
Las ventanas modales pueden ser un poco complicadas de poner en marcha, por lo que vamos a repasar cómo crear una ventana modal simple con solo HTML y CSS. ¡
seo
en
https://cdnimages.juegosboom.com/posicionamientoweblogrono.es/1220/dbmicrodb1-seo-como-hacer-una-ventana-modal-simple-71-0.jpg
2023-02-14
Acording with the Digital Millennium Copyright Act (“DMCA”), Pub. L. 105-304 If you believe that your copyrighted work is being infringed, notify our team at the email [email protected]