-1

Soy nuevo en esto del diseño web y estoy aprendiendo por mi cuenta. Me encuentro creando un pop up que aparece automáticamente cuando la pagina se carga. El problema es que al pulsar el botón de "X" el Pop-up no se cierra. No sé de qué otra manera lo puedo hacer para que cierra o que estoy haciendo mal con el código que tengo. Esta forma de hacer el botón la encontré en un Youtube, en el video funcionaba bien.

<div class="modal">
            <div class="contenido">
                <div id="popup-texto">
                    <h1>Lorem Ipsum</h1>
                    <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet dolor sit amet dolor molestie, sed luctus ante dignissim. Vestibulum molestie pharetra imperdiet. .</p>
                </div>
                <img src="img/popup.png" alt="" id="imagen-popup">

                <a href="#" class="btn-cerrar-popup">X</a>
            </div>
        </div>

2
  • Debe hacer uso de javascript, ya que va a generar un evento click, a éto hay que sumarle, el conocer atributos de css. No es posible con html sólo. Commented el 12 jun. 2020 a las 19:48
  • Si es posible con HTML y CSS, vi como se hace con un input checkbox, el problema es que queda el botón por fuera del Modal. Commented el 13 jun. 2020 a las 9:59

2 respuestas 2

3

Hay diversas maneras de mostrar/ocultar un modal. Una manera sencilla es utilizar JavaScript para aplicar la propiedad CSS display al modal de forma dinámica.

En este ejemplo utilizo la propiedad classList en conjunto con el método toggle para activar/desactivar una clase que aplica la propiedad display:

// Capturamos los elementos relevantes
const modal = document.querySelector('.modal');
const cerrarModal = document.querySelector('.btn-cerrar');
const abrirModal = document.querySelector('.btn-abrir');

// Event listener para cerrar
cerrarModal.addEventListener('click', function() {
  modal.classList.toggle('open');
});

// Event listener para abrir
abrirModal.addEventListener('click', function() {
  modal.classList.toggle('open');
});
body {
  font-family: sans-serif;
}

.modal {
  border: 2px solid gray;
  padding: 20px;
  width: 300px;
  margin: 20px;
  display: none;
}

.btn-cerrar {
  text-decoration: none;
}

.open {
  display: block;
}
<div class="modal">
  <a href="#" class="btn-cerrar">X</a>
  <div class="contenido">
    <div id="popup-texto">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet dolor sit amet dolor molestie, sed luctus ante dignissim. Vestibulum molestie pharetra imperdiet..</p>
    </div>
    <img src="https://placehold.it/300x200" alt="" id="imagen-popup">
  </div>
</div>


<button class="btn-abrir">abrir</button>

Nota: Hay diferentes frameworks y librerías que automatizan esto. Pero si estas aprendiendo es bueno saber cómo construir un modal básico por tu cuenta.

Aclaración: Si estás mostrando el modal cuando la página carga, entonces no vas a necesitar un botón "Abrir".

-1

A tu enlace, agrégale el atributo data-dismiss="modal" y quedaría:

<a href="#" class="btn-cerrar-popup" data-dismiss="modal">X</a>

Aunque yo prefiero usar button:

<button type="button" class="close" data-dismiss="modal">&times;</button>

Podrás encontrar mucha ayuda y guías prácticas para modales y bootstrap en:

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Ahí tienes las dos formas de ejecutar un modal. Por javascript y por medio de los atributos data-*

Una cosa más. Como puedes ver en los ejemplos:

  • Cuando usas los atributos data-* el modal se define "despues" de la definición del botón.
  • Cuando usas javascript se define "antes" de la ejecución de la función en javascript.
5
  • Erik, gracias por tomarte el tiempo de ayudarme, pero desafortunadamente no me funcionó eso que me dijiste. No se si necesito proporcionarte algún dato extra... Commented el 13 jun. 2020 a las 9:00
  • Me parece que tu problema es la forma como usas el modal. Si te fijas en el enlace que te mandé, hay dos formas de hacer funcionar un modal. Por javascript y por los atributos "data-*". Pero cuando mezclas ambos suelen surgir confusiones. He editado mi respuesta. Commented el 14 jun. 2020 a las 18:24
  • 4
    Porqué haces referencia a Bootstrap? Cómo sabes que es el código que utiliza el OP? Commented el 19 jun. 2020 a las 16:31
  • Si el OP estuviera creando un MODAL sin usar bootstrap, compartiría el código. Como no manda nada más, y de paso el OP comentó mi respuesta, se infiere que SÍ está utilizando Bootstrap. Commented el 20 jun. 2020 a las 16:49
  • 1
    El código que comparte no usa Bootstrap, el OP comentó y dijo que no funcionaba. Commented el 25 jun. 2020 a las 17:01

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.