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.
section .todo-modal
eso va a modificar sólo los elementos con clase.todo-modal
que estén dentro de unsection
, en el html el elemento con esa clase es un section