0

He creado una ventana modal con html y css para una web donde quiero que al presionar el botón Leer mas aparezca la ventana modal, algo que no se obtiene al ejecutar el código, el botón y la ventana aparece desde un inicio. Lo que se quiere obtener es que al momento de llamar la ventana modal (haciendo click en el botón leer mas) aparezca la ventana modal y luego presionando X se cierre. A continuación pongo el código creado para el diseño de la pagina web: CSS

a.link-modal{
    background-color: #414141;
    border-radius: 5px;
    color: #fff;
    font-size: 1.5em;
    margin: 20px;
    padding: 10px 20px;
    position: absolute;
    text-decoration: none;
    text-shadow: 2px 2px 0px #000;
}
section .todo-modal {
    background-color: white;
    bottom: 0;
    top:0;
    left: 0;
    right: 0;
    position: fixed;
    display: none;
    z-index: 2;
}
section .todo-modal:target {
    display: block;
}
a.close {
    background-color: #414141;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    position: absolute;
    right: 5px;
    top:5px;
    text-align: center;
    text-decoration: none;
    width: 28px;
}
a.close {
    background-color: #000;
}
section .vent-modal{
    background-color: #111;
    box-shadow: 0px 0px 10px #000;
    border-radius: 5px;
    color: #fff;
    margin: 10% auto;
    padding: 20px;
    position: relative;
    width: 400px;
}
h2 {
    color: #fff;
    font-size: 2em;
    margin-bottom: 10px;
}
p {
    color: #fff;
    font-size: 1.2em;
}

HMTL

<main class="contenido">
  <div class="modal-public">
    <a href="#modal" class="link-modal">Leer mas</a>
    <section id="modal" class="todo-modal">
      <section class="vent-modal">
        <a href="#close" class="close">X</a>
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, asperiores.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore asperiores vel architecto porro quis maxime necessitatibus ipsum deserunt iusto voluptatibus totam explicabo voluptatem laudantium, facere sed excepturi, libero iste ad eligendi animi
          dicta deleniti voluptates! Voluptatum obcaecati quae nostrum necessitatibus.
        </p>

      </section>
    </section>
  </div>
</main>

Al hacer todo esto aparece la ventana modal y el boton Leer mas.

1
  • 1
    hay un espacio en section .todo-modal eso va a modificar sólo los elementos con clase .todo-modal que estén dentro de un section, en el html el elemento con esa clase es un section Commented el 23 abr. 2020 a las 19:57

1 respuesta 1

1

El problema está en los espacios que hay entre los elementos y la clase de esos elementos: Una solución es eliminar los espacios en blanco (Así le indicas que un elemento section que contiene la clase "todo-modal").

section.todo-modal {
    //tu código
}

Lo mismo con la otra:

section.todo-modal:target {
    //tu código
}

Y otra solución sería agregar un poco de javascript(Si quieres conservar tu codigo en css). Se añade css al section:

#modal{
     display: none;
 }

Se añade un id al elemento "a"

<a id="abrirModal" href="#modal" class="link-modal" role="button">Leer mas</a>

Y el código Javascript quedaría así:

<script>
        window.onload = function() {
            var modal = document.getElementById("modal");
            var btn = document.getElementById("abrirModal");//el botón
            var cerrar = document.getElementsByClassName("close")[0];
            console.log(modal);
            btn.onclick = function() {//Cuando detecte el click en el boton
                modal.style.display = "block";//aplica estilos a elemento section (desplegando en bloque)
            }
            cerrar.onclick = function() {//cuando detecta el click en cerrar
                modal.style.display = "none";//vuelve a aplicar estilos al elemento modal (No desplegando)
            }
            window.onclick = function(event) {
                if (event.target == modal) {
                modal.style.display = "none";
            }
            }
        }
    </script>

Y funciona muy bien también, espero te sirva.

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.