CSS Modal

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; } }
JAVASCRIPT
Expand for more options Login