Ventanas Modales
De acuerdo a la siguiente cita:
"... El problema es que no logro hacer que las imagenes se adapten al ancho del modal, por lo que el resto del contenido desaparece o no se muestra correctamente..."
Además, de este comentario:
"El ejemplo que me pones con Bootstrap es lo que ando buscando, el detalle es que lo solicitan SIN Bootstrap..."
Como respuesta al compañero Iván Hernández se entiende que quieres lograr algo parecido a esto:
/*
Tome en cuenta, que esta parte del código es la menos
importante cuando se trata de ajustar imágenes a la
ventana modal. El código JavaScript presente acá sólo es
útil para abrir o cerrar una ventana modal. Sin embargo,
se puede conseguir el mismo efecto sin JavaScript.
*/
// La siguiente función permitirá pasar una cantidad
// variable de parámetros. Los dos primeros parámetros
// son los elementos que vamos a removerle y agregarle
// clases CSS:
const cerrar = (_modal, _card, ...elementos) => {
if (
elementos.length &&
typeof _modal !== "undefined" &&
typeof _card !== "undefined"
) {
elementos.forEach((elemento) => {
// Cuando se requiere que una cantidad variable
// de elementos realicen las mismas acciones mediante
// la captura del evento "click":
elemento.addEventListener(
"click",
() => {
// Al presionar los botones relacionados
// el cierre de la ventana modal se removerán
// las clases relacionadas con su visualización,
// a la vez que se asignará la clase .none para
// ocultarlo al usuario:
_modal.classList.remove("modal");
_card.classList.remove( "card--main" );
_modal.classList.add("none");
},
false
);
});
}
};
// La función «cerrar()» permite pasar una cantidad
// variable de parámetros. El primero y segundo parámetro
// son los elementos a procesar:
cerrar(modal, card, botonCerrar, aceptar);
// Agregar clases a los elementos «modal» «card»
// para que se comporten como ventanas modales:
const agregarClase = () => {
modal.classList.remove("none");
modal.classList.add("modal");
card.classList.add("card--main");
};
// Cuando el usuario presiona el botón gris con la
// etiqueta «Abrir Ventana Modal» se llama la función
// «agregarClase()» que es la que agregarán las clases
// modal y card--main en los elementos #modal y #card
// para que se comporte como una venta modal:
abrirModal.onclick = () => {
agregarClase();
};
/* Fuentes de Google */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
::-moz-focus-inner {
border: 0;
}
/* Fuente por defecto en toda la aplicación*/
:root {
font-family: "Roboto", sans-serif;
}
*{
box-sizing: border-box;
}
*::before, *::after {
box-sizing: inherit;
}
hr {
margin: 10px auto;
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid;
}
/* Contenedor de la ventana Modal */
.modal {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
overflow: auto;
}
/* Ventana Modal con apariencia de una tarjeta */
.card {
--relleno: 10px;
--anchura: 800px;
border-radius: 5px;
background-color: #e6e6e6;
}
.card--main {
margin: 10px auto;
width: calc(100% - 20px);
max-width: var(--anchura);
animation: 300ms ease fadeIn 1;
}
.card__header, .card__footer {
min-height: 30px;
padding: var(--relleno);
overflow: hidden;
}
.card__header {
min-height: 50px;
}
.card__header--flex {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Se ajusta la imagen a la anchura de su contenedor
sin perder sus proporciones: */
.card__img {
display: block;
width: 100%;
height: auto;
max-height: 100%;
/* La imagen pierde todo su color pasando a escala
de grises */
filter: saturate(0%);
}
/* Al colocar el cursor sobre la imagen recupera su color */
.card__img:hover {
filter: saturate(100%);
}
.card__title {
font-size: 1.3rem;
font-weight: normal;
}
.card__close {
font-size: 1.5rem;
width: 40px;
width: 40px;
text-align: center;
transition: 300ms ease;
border-radius: 3px;
cursor: default;
}
.card__close:hover {
background-color: #e00000;
color: white;
}
.card__close:active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
transition: none;
}
.group-buttons {
padding-top: var(--padding);
padding-bottom: var(--padding);
text-align: right;
width: 100%;
}
.button {
border: 0;
height: 35px;
min-width: 100px;
border-radius: 3px;
padding: 0 10px;
background-color: #4d4d4d;
color: white;
font-family: inherit;
font-size: inherit;
transition: 300ms ease;
outline: none;
}
.button:hover {
background-color: #595959;
}
.button:active {
transition: none;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.button--close {
background-color: #e00000;
}
.button--close:hover {
background-color: #c70000;
}
.button--ok {
background-color: #0080d4;
}
.button--ok:hover {
background-color: #0071bb;
}
.none {
display: none;
}
@keyframes fadeIn {
from {
transform: scale(0.97);
}
}
<button class="button block" id="abrirModal">Abrir Ventana Modal</button>
<!-- Ventana Modal -->
<div id="modal" class="none">
<div class="card" id="card">
<header class="card__header card__header--flex">
<div class="card__title">Título de la Tarjeta</div>
<div class="card__close" id="botonCerrar">×</div>
</header>
<div class="card__content">
<img src="https://cdn.pixabay.com/photo/2020/06/06/19/31/cat-5267886_960_720.jpg" class="card__img">
</div>
<footer class="card__footer">
<p>Texto que se encuentra en el pie de la foto.</p>
<hr>
<div class="group-buttons">
<button class="button button--ok button--right" id="aceptar">Aceptar</button>
</div>
</footer>
</div>
</div>
Puede probar en diferentes pantallas la ventana modal.
Estructura HTML
Lo puedes hacer manteniendo la siguiente estructura HTML:
.modal
.card
| .card__header
| | .card__title
| | .card__close
| | |
| .card__content
| | .card__img
| | |
| .card__footer
| | [texto]
| | .group-buttons
| | | .button
Aplicando las siguientes reglas:
.modal {}
: es el contenedor de la ventana modal.
´
.card {}
: es la ventana modal, pero con la apariencia de una tarjeta.
.card__header {}
: es la cabecera de la ventana modal.
.card__title {}
: es el título que se ubica dentro de .card__header
.
.card__close {}
: es el botón de cierre de la ventana modal.
.card__content {}
: Donde se ubica el contenido de la ventana modal. En este caso, el contenido es la imagen que debe ocupar todo el de su contenedor (.card__content
).
.card__footer {}
: es el pie de la ventana modal. En ella se puede colocar un texto descriptivo. También se pueden colocar en ella uno o varios botones para realizar determinadas acciones.
.group_butttons {}
: es la que afecta al elemento que contendrá a uno o varios botones en la parte inferior derecha de la ventana modal.
.button {}
: es el que define la apariencia por defecto del botón.
IMPORTANTE:
Lea los comentarios que se encuentra ubicado en el código; publicado al principio de esta respuesta. En ella se explican detalles. También puede visitar Ventana Modal - CodePen para que pueda experimentar con el código.