Skip to main content
se eliminaron 1535 caracteres en el cuerpo
Origen Enlace
<main class="contenido">
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;
}
<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>
<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>

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;
}
<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>
<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>
Origen Enlace

Problema con ventana modal html css

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


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;
}
<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.