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
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
<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> |
/** | |
* 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; | |
}); | |
}); | |
} |
.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); | |
} | |
} | |
} | |
} |