Created
October 18, 2012 18:45
-
-
Save westonwatson/3914027 to your computer and use it in GitHub Desktop.
Pure CSS Lightbox Solution.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>LIGHTBOX EXAMPLE</title> | |
| <style> | |
| .black_overlay{ | |
| display: none; | |
| position: absolute; | |
| top: 0%; | |
| left: 0%; | |
| width: 100%; | |
| height: 100%; | |
| background-color: black; | |
| z-index:1001; | |
| -moz-opacity: 0.8; | |
| opacity:.80; | |
| filter: alpha(opacity=80); | |
| } | |
| .white_content { | |
| display: none; | |
| position: absolute; | |
| top: 25%; | |
| left: 25%; | |
| width: 50%; | |
| height: 50%; | |
| padding: 16px; | |
| border: 16px solid orange; | |
| background-color: white; | |
| z-index:1002; | |
| overflow: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> | |
| <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> | |
| <div id="fade" class="black_overlay"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Taken from http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/