/*
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 ventanaVentana modal<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.