<div class="modal">
<input id="modal" type="checkbox" class="modal--toggle">
<label for="modal" class="modal--toggle--text">Open Modal</label>
<div class="modal--container">
<div class="modal--content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus velit maxime quam cupiditate, similique, doloribus voluptatum magnam vitae voluptatem, maiores labore explicabo dolor! Consectetur et quibusdam est corporis iusto perspiciatis!</p>
<label class="modal--toggle--text" for="modal">Close</label>
</div>
</div>
</div>
.modal--toggle, .modal--container {
display: none;
}
.modal--toggle:checked ~ .modal--container {
display: block;
}
.modal--container {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal--content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.modal--toggle--text {
padding: 14px;
border: 2px solid #fff;
background-color: #ccc;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.