This is just a really easy lightbox that can be used, created with minimal javascript and css, but has a bit of life and animation!
Demo is visible here https://codepen.io/zephyr/pen/XgzEyP
Last active
June 27, 2017 14:33
-
-
Save zeraphie/4bc0cfc1765ec6287de970245ad4b192 to your computer and use it in GitHub Desktop.
This is just a really easy lightbox that can be used, created with minimal javascript and css
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 class="lightbox"> | |
| <div class="lightbox-content"> | |
| <div class="closer"></div> | |
| <h2 class="lightbox-title"> | |
| <!-- The lightbox title --> | |
| </h2> | |
| <div class="scrolling-content"> | |
| <!-- Content for the lightbox --> | |
| </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
| /** | |
| * Requires jQuery! | |
| */ | |
| var lightboxTriggers = $(/* Whatever element is the trigger for the lightbox */); | |
| if(!!lightboxTriggers.length){ | |
| var closeLightbox = function(lightbox){ | |
| lightbox.removeClass('active'); | |
| setTimeout(function(){ | |
| lightbox.css({ | |
| 'display': 'none' | |
| }); | |
| }, 310); | |
| }; | |
| lightboxTriggers.each(function(){ | |
| var trigger = $(this); | |
| trigger.on('click', function(e){ | |
| e.preventDefault(); | |
| var lightbox = trigger.next(); | |
| lightbox.css({ | |
| 'display': 'block' | |
| }); | |
| setTimeout(function(){ | |
| var escapeLightbox = function(e){ | |
| /** | |
| * On hitting the escape key, close the lightbox | |
| * and remove the binding | |
| */ | |
| if(e.which === 27){ | |
| e.preventDefault(); | |
| closeLightbox(lightbox); | |
| $('body').off('keyup', escapeLightbox); | |
| } | |
| }; | |
| lightbox.addClass('active'); | |
| $('body').on('keyup', escapeLightbox); | |
| lightbox.on('click', function(e){ | |
| if($(e.target).hasClass('lightbox')){ | |
| e.preventDefault(); | |
| closeLightbox(lightbox); | |
| return false; | |
| } | |
| }); | |
| lightbox.find('.closer').on('click', function(e){ | |
| e.preventDefault(); | |
| closeLightbox(lightbox); | |
| return false; | |
| }); | |
| }, 10); | |
| return false; | |
| }); | |
| }); | |
| } |
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
| .lightbox { | |
| display: none; | |
| opacity: 0; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 9001; | |
| transform: translate3d(0, -10px, 0); | |
| transition: opacity 0.3s, transform 0.3s; | |
| &.active { | |
| opacity: 1; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .lightbox-title { | |
| margin: 0; | |
| height: 48px; | |
| line-height: 48px; | |
| overflow: hidden; | |
| width: calc(100% - 80px); | |
| } | |
| .lightbox-content { | |
| position: relative; | |
| float: left; | |
| left: 32px; | |
| top: 32px; | |
| width: calc(100% - 64px); | |
| height: calc(100% - 64px); | |
| border-radius: 0.5em; | |
| border: 3px solid rgba(0, 0, 0, 0.2); | |
| background: #fff; | |
| padding: 32px; | |
| box-sizing: border-box; | |
| } | |
| .scrolling-content { | |
| position: relative; | |
| margin-top: 32px; | |
| max-height: calc(100% - 80px); | |
| overflow: auto; | |
| padding-right: 16px; | |
| box-sizing: border-box; | |
| p:first-child { | |
| margin-top: 0; | |
| } | |
| p:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .closer { | |
| position: absolute; | |
| top: 32px; | |
| right: 32px; | |
| height: 48px; | |
| width: 48px; | |
| cursor: pointer; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| height: 4px; | |
| width: 32px; | |
| background: #333; | |
| transition: transform 0.3s; | |
| } | |
| &:before { | |
| transform: translate3d(-50%, -50%, 0) rotate(45deg); | |
| } | |
| &:after { | |
| transform: translate3d(-50%, -50%, 0) rotate(-45deg); | |
| } | |
| &:hover, | |
| &:focus { | |
| &:before { | |
| transform: translate3d(-50%, -50%, 0) rotate(-225deg); | |
| } | |
| &:after { | |
| transform: translate3d(-50%, -50%, 0) rotate(225deg); | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment