0

Estoy implementando ventanas modal en una pagina, el proposito es que tenga 3 secciones, el titulo, cuerpo y un footer. En el cuerpo podra tener texto o imagenes y el footer texto, imagenes o enlaces. El problema es que no logro hacer que las imagenes se adapten al ancho del modal, por lo que el resto del contenido o desaparece o no se muestra correctamente. Espero me puedan apoyar y decirme que estoy haciendo mal

CODIGO (Fuente imagen de muestra: https://pixabay.com/es)

<button id="btn1">Boton muestra</button>

<div class="modal" id="modal1">
    <div class="modal-contenido">
        <h3>Instrucciones</h3>
        <img src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg">
        <p>Lorem Ipsum</p>
    </div>
</div>

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 136, 204, 0.4);
    transform: scale(0);
    transition: transform 0.2s;
}

.modal-contenido {
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-content: center;
    background: #ffffff;
    padding: 0.5em 0.7em;
    border-radius: 7px;
}

.modal-mostrar {transform: scale(1);}

const boton1 = document.getElementById('btn1')
const modal1 = document.getElementById('modal1')

boton1.addEventListener('click', () => modal1.classList.add('modal-mostrar'))
modal1.addEventListener('click', (e) => {
    if (e.target.classList.contains('modal'))
        modal1.classList.remove('modal-mostrar')
})

2 respuestas 2

5

Tu codigo generalmente esta bien, solo con agregar una clase extra para la imagen puedes cambiar su tamaño desde el css, aqui tienes una muestra de como se haria para que la imagen abarque el 25% del espacio solamente cambiando

<img src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg">

Por

<img src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg" class="img-modal">

Y añadiendo

.img-modal{
    width:25%;
}

A tu css, otra forma de hacerlo seria con bootstrap

Instrucciones

const boton1 = document.getElementById('btn1')
const modal1 = document.getElementById('modal1')

boton1.addEventListener('click', () => modal1.classList.add('modal-mostrar'))
modal1.addEventListener('click', (e) => {
    if (e.target.classList.contains('modal'))
        modal1.classList.remove('modal-mostrar')
})
.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 136, 204, 0.4);
    transform: scale(0);
    transition: transform 0.2s;
}

.modal-contenido {
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-content: center;
    background: #ffffff;
    padding: 0.5em 0.7em;
    border-radius: 7px;
}
.img-modal{
    width:25%;
}

.modal-mostrar {transform: scale(1);}
<button id="btn1">Boton muestra</button>

<div class="modal" id="modal1">
    <div class="modal-contenido">
        <h3>Instrucciones</h3>
        <img src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg" class="img-modal">
        <p>Lorem Ipsum</p>
    </div>
</div>

Modo con boostrap

        
       
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Instrucciones</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img class="col-md-4 col-sm-12" src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg">
      </div>
      <div class="modal-footer">
       <p>Lorem Ipsum</p>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

De ambas formas puedes generar contenido dinamico con JS para inserción solamente usando la funcion onclick

Edicion

Puedes intentar algo como esto, en el cual se crea un mejor modal

let a = document.querySelector("#a");
let b = document.querySelector("#b");

function openModal() {
    a.style.display ="block";
    b.style.display ="block";
  }


function closeModal(){
  a.style.opacity ="0";
  b.style.opacity ="0";
}
.main{
  width: 100%;
  height: 100vh;
  text-align: center;
}

.main div{
  width: 400px;
  height: 400px;
  margin:0 auto;
  text-align: center;

}
.main div button{
  top: 500px;
  height: 30px;
  margin: 0 auto;
}


.container{
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  opacity: 0.9;
  background: #222;
  z-index: 40000;
  top:0;
  left: 0;
  overflow: hidden;

  animation-name: fadeIn_Container;
  animation-duration: 1s;
  
}

.modal{
  display:none;
  top: 0;
  min-width: 250px;
  width: 80%;
  height: 400px;
  margin: 0 auto;
  position: fixed;
  z-index: 40001;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #000;
  margin-top: 30px;
  margin-left: 10%;

  animation-name: fadeIn_Modal;
  animation-duration: 0.8s;
 
}

.header{
  width: 100%;
  height: 70px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: 2px solid #ccc;
}

.header a{
  text-decoration: none;
  float: right;
  line-height: 70px;
  margin-right: 20px;
  color: #aaa;
}

.content{
  width: 100%;
  height: 250px;
}

form{
    margin-top: 20px;
}

form label{
  display: block;
  margin-left: 12%;
  margin-top: 10px;
  font-family: sans-serif;
  font-size: 1rem;
}

form input{
  display: block;
  width: 75%;
  margin-left: 12%;
  margin-top: 10px;
  border-radius: 3px;
  font-family: sans-serif;
}

#first_label{
  padding-top: 30px;
}

#second_label{
  padding-top: 25px;
}


.footer{
  width: 100%;
  height: 80px;
  border-radius: 0px 0px 10px 10px;
  border-top: 2px solid #ccc;
}

.fotter button{
  float: right;
  margin-right: 10px;
  margin-top: 18px;
  text-decoration: none; 
}

.img-modal{
  max-width:50%;
}
/****MEDIA QUERIES****/

@media screen and (min-width: 600px){

  .modal{
    width: 500px;
    height: 300px;
    margin-left: calc(50vw - 250px);
    margin-top: calc(50vh - 150px);
  }


  .header{
    width: 100%;
    height: 40px;
  }

  .header a{
    line-height: 40px;
    margin-right: 10px;
  }

  .content{
    width: 100%;
    height: 190px;
  }

  form label{
    margin-left: 10%;
    margin-top: 10px;
  }

  form input{
    width: 75%;
    margin-left: 10%;
    margin-top: 10px;
  }

  #first_label{
  padding-top: 0px;
  }

  #second_label{
    padding-top: 0px;
  }

  .footer{
    width: 100%;
    height: 70px;   
  }

  .footer button{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
  }
  
}

/*LARGE SCREEN*/
@media screen and (min-width: 1300px){

}

/****ANIMATIONS****/

@keyframes fadeIn_Modal {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes fadeIn_Container {
  from{
    opacity: 0;
  }
  to{
    opacity: 0.9;
  }
}

.slideSource {
  opacity: 1;
  transition: opacity 1s; 
}
<div class="main">
  <div>
    <button id="open" onclick="openModal()">Open Modal</button>
  </div>
</div>
<div class="container" id="a" class="slideSource">
  
</div>
<div class="modal" id="b" class="slideSource">
  <div class="header">
    <a href="#" class="cancel" onClick="closeModal()">X</a>
  </div>
  <div class="content">
    <img src="https://cdn.pixabay.com/photo/2020/01/26/20/14/computer-4795762_960_720.jpg" class="img-modal">
  </div>
  <div class="footer">
        <p>Lorem Ipsum</p>
  </div>
</div>

Fuente

CodePen Home Modal Without Bootstrap

5
  • El ejemplo que me pones con Bootstrap es lo que ando buscando, el detalle es que lo solicitan SIN Bootstrap. El ejemplo en base al codigo que tengo sigue mostrandose de alguna manera poco estetico, hay manera de darle el aspecto como el que me muestras utilizando bootstrap (asi en tres secciones o niveles).
    – DevNX
    Commented el 10 jun. 2020 a las 4:48
  • Si amigo, es bastante mas codigo pero si Commented el 10 jun. 2020 a las 4:49
  • Podrias apoyarme con el codigo o alguna pagina o documento que me sirva de guia
    – DevNX
    Commented el 10 jun. 2020 a las 4:51
  • Acabo de editar Commented el 10 jun. 2020 a las 5:19
  • Encerio, muchas gracias!
    – DevNX
    Commented el 10 jun. 2020 a las 19:31
2

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">&times;</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.

3
  • 1
    Se que esta seccion no es para lo que voy a hacer, pero me encantó tu codigo, esta bastante claro y es un muy buen trabajo de maquetado, felicidades. Commented el 10 jun. 2020 a las 17:29
  • 2
    Muchas gracias a los dos (David Luna y @ivanhernandezaguilar) Con las respuestas de ambos estoy seguro que podre resolver mi problema, marque la respuesta de David, pero si pudiera marcara las dos, las dos son de gran ayuda, aun asi a la 1ra le di un voto. De nuevo gracias!
    – DevNX
    Commented el 10 jun. 2020 a las 19:35
  • Gracias @ivanhernandezaguilar y DevNX. Commented el 11 jun. 2020 a las 0:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.