HTML
<div class="modal">
<input id="modal__trigger" type="checkbox" />
<label for="modal__trigger">Click me!</label>
<div class="modal__overlay" role="dialog" aria-labelledby="modal__title" aria-describedby="modal_desc">
<div class="modal__wrap">
<label for="modal__trigger">✖</label>
<h2 id="modal__title">Modal Content</h2>
<p id="modal__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
</div>
</div>
</div>
SCSS
html, body {
background: #61bfbe;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inconsolata', monospace;
}
/*====================================
Our Modal Window styles
=====================================*/
.modal {
display: inline-block;
padding: 1em;
> label {
background: #e25d6e;
border: 1px solid #333;
border-radius: .2em;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 1em 1.8em;
transition: all 0.55s;
letter-spacing: 4px;
font-size: 20px;
}
}
@media (min-width: 43.75em) {
.modal { padding: 1.5em; }
}
.modal__overlay {
background: #4C6085;
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
text-shadow: none;
top: 0;
z-index: 600;
}
.modal__wrap {
padding: 1em 0;
position: relative;
margin: 0 auto;
max-width: 500px;
width: 90%;
label {
background: #fff;
border-radius: 50%;
color: #000000;
cursor: pointer;
display: inline-block;
height: 1.5em;
line-height: 1.5;
position: absolute;
right: .5em;
top: .5em;
width: 1.5em;
}
h2 {
color: #fff;
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 6px;
}
p {
color: #fff;
text-align: justify;
}
}
@media (min-width: 50em) {
.modal__wrap {
padding: 1.75em;
}
}
@media (min-height: 37.5em) {
.modal__wrap {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -80%);
transform: translate(-50%, -80%);
}
}
.modal input:focus ~ label {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
input {
position: absolute;
top: -1000px;
}
.modal__overlay {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -100;
}
input:checked ~ .modal__overlay {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
z-index: 800;
}
1 Response