HTML
<img class="bg" src="https://c2.staticflickr.com/2/1598/25380783360_8a50917d3d_o.jpg" width="2048" height="1152" alt="NASA Unveils Celestial Fireworks as Official Hubble 25th Anniversary Image">
<!-- trigger -->
<a href="#text" class="press-me">Press Me</a>
<!-- lightbox container hidden with CSS -->
<div class="modal-container" id="text">
<div class="modal-overlay">
<a class="modal-close" href="#" title="close modal">X</a>
<div class="modal-dialog">
<div class="modal-heading">
<p>Modal Window with Text</p>
</div>
<div class="modal-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at volutpat ipsum. Nullam nec posuere ante. Nulla molestie ac odio sed malesuada. Ut dapibus odio eget vestibulum condimentum. Cras suscipit metus id varius blandit. Donec lorem ipsum, molestie
ac sagittis nec, vulputate ac augue. Quisque ut nisi sagittis, blandit ipsum at, luctus ipsum. Donec vitae lorem elit. Mauris volutpat consequat venenatis. Duis pharetra varius enim lobortis suscipit. Donec tincidunt sapien massa, quis congue
nibh viverra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at volutpat ipsum. Nullam nec posuere ante. Nulla molestie ac odio sed malesuada. Ut dapibus odio eget vestibulum condimentum. Cras suscipit metus id varius
blandit. Donec lorem ipsum, molestie ac sagittis nec, vulputate ac augue. Quisque ut nisi sagittis, blandit ipsum at, luctus ipsum. Donec vitae lorem elit. Mauris volutpat consequat venenatis. Duis pharetra varius enim lobortis suscipit. Donec
tincidunt sapien massa, quis congue nibh viverra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at volutpat ipsum. Nullam nec posuere ante. Nulla molestie ac odio sed malesuada. Ut dapibus odio eget vestibulum condimentum.
Cras suscipit metus id varius blandit. Donec lorem ipsum, molestie ac sagittis nec, vulputate ac augue. Quisque ut nisi sagittis, blandit ipsum at, luctus ipsum. Donec vitae lorem elit. Mauris volutpat consequat venenatis. Duis pharetra varius
enim lobortis suscipit. Donec tincidunt sapien massa, quis congue nibh viverra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at volutpat ipsum. Nullam nec posuere ante. Nulla molestie ac odio sed malesuada. Ut dapibus
odio eget vestibulum condimentum. Cras suscipit metus id varius blandit. Donec lorem ipsum, molestie ac sagittis nec, vulputate ac augue. Quisque ut nisi sagittis, blandit ipsum at, luctus ipsum. Donec vitae lorem elit. Mauris volutpat consequat
venenatis. Duis pharetra varius enim lobortis suscipit. Donec tincidunt sapien massa, quis congue nibh viverra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at volutpat ipsum. Nullam nec posuere ante. Nulla molestie
ac odio sed malesuada. Ut dapibus odio eget vestibulum condimentum. Cras suscipit metus id varius blandit. Donec lorem ipsum, molestie ac sagittis nec, vulputate ac augue. Quisque ut nisi sagittis, blandit ipsum at, luctus ipsum. Donec vitae
lorem elit. Mauris volutpat consequat venenatis. Duis pharetra varius enim lobortis suscipit. Donec tincidunt sapien massa, quis congue nibh viverra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at volutpat ipsum. Nullam
nec posuere ante. Nulla molestie ac odio sed malesuada. Ut dapibus odio eget vestibulum condimentum. Cras suscipit metus id varius blandit. Donec lorem ipsum, molestie ac sagittis nec, vulputate ac augue. Quisque ut nisi sagittis, blandit
ipsum at, luctus ipsum. Donec vitae lorem elit. Mauris volutpat consequat venenatis. Duis pharetra varius enim lobortis suscipit. Donec tincidunt sapien massa, quis congue nibh viverra eget.
</div>
</div>
</div>
</div>
CSS
p{
font-size:12px;
line-height:160%;
color:#EEE;
margin:0;
padding:0;
}
.bg{
position:fixed;
width:auto;
height:100%;
z-index:-1;
}
.press-me{
display:inline-block;
padding: 5px 10px;
margin:10px;
border-radius:3px;
background-color:#ccc;
color:#000;
text-decoration:none;
font-size:10px;
line-height:160%;
text-transform:uppercase;
text-align:center;
}
.modal-container{
/* hide all modal containers */
display:none;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9;
width: 100%;
height: 100%;
top: 0;
left: 0;
color:#333333;
}
.modal-container:target{
display:block;
outline:none;
}
.modal-overlay{
background-color:#333;
opacity:.8;
width: 100%;
height: 100%;
position:fixed;
top:0;
display:flex;
justify-content:center;
align-items: center;
}
.modal-dialog{
display:block;
overflow:auto;
width:80%;
height:80%;
border:20px solid #fff;
background-color:#FFF;
box-shadow: 0px 1px 26px -3px #111;
}
.modal-close{
position:absolute;
top:10px;
right:10px;
display:block;
text-decoration:none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
color:#858585;
}
.modal-heading{
padding:10px 0;
border-bottom:1px solid #EEE;
}
.modal-content{
display:block;
padding:10px 0 0 0px;
overflow:auto;
}
.modal-heading p{
font-size:16px;
line-height:140%;
color:#333;
font-weight:700;
}
@media screen and (max-width: 461px) {
modal-dialog{
border:0;
padding:20px;
}
}
2 Responses
Nice work.