-
-
Save maxterry/464fdbaa4b6ec2260414 to your computer and use it in GitHub Desktop.
Simple Lightbox (modal window with semi-transparent background)
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
| Simple Lightbox (modal window with semi-transparent background) |
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
| âPNG | |
| IHDRµ IDATxúcº ÒY(O‰IENDÆB`Ç |
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
| #lightboxContainer { | |
| display: none; | |
| position: absolute; top: 0; height: 100%; width: 100%; z-index: 1; | |
| background: url(/img/bg.png); | |
| } | |
| #lightbox { | |
| display: none; | |
| z-index: 2; | |
| margin-top: 135px; | |
| margin-left: auto; margin-right: auto; | |
| height: 50%; width: 50%; | |
| min-height: 200px; min-width: 200px; | |
| background: #fff; | |
| } |
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
| <div id="lightboxContainer"> | |
| <div id="lightbox"> | |
| <div> | |
| <div> | |
| Lightbox | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
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
| function showLightbox() { | |
| // Semi-transparent background | |
| document.getElementById('lightboxContainer').style.display = 'block' | |
| // Dialog box | |
| document.getElementById('lightbox').style.display = 'block' | |
| // Prevent scrolling | |
| document.body.style.overflow = 'hidden' | |
| // Set Esc button listener, to close lightbox | |
| document.onkeydown = function(ev) { | |
| ev = ev || window.event | |
| if (ev.keyCode == 27) { | |
| hideLightbox() | |
| } | |
| } | |
| } | |
| function hideLightbox() { | |
| document.getElementById('lightboxContainer').style.display = 'none' | |
| document.getElementById('lightbox').style.display = 'none' | |
| document.body.style.overflow = 'auto' | |
| document.keydown = null | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment