Sorry, this video is only available to Pro accounts.
Upgrade your account to get access to all content.
Creating a Javascript Lightbox
Created on August 31st, 2017
In this video you will learn how easy it is to create a quick javascript lightbox. No jQuery needed, just Vanila Javascript and CSS to create a simple Lightbox popup.
There are 2 files that were created in this video which include:
- index.html
- style.css
Which can both be found below:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Lightbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello Lightbox</h1>
<button id="clickme">Open Lightbox</button>
<div id="lightbox">
<div id="lightbox_content">
<div id="close">×</div>
<h2>Javascript Lightbox</h2>
<p>Hello from the lightbox :)</p>
</div>
</div>
<script>
document.getElementById('clickme').addEventListener('click', function(){
document.getElementById('lightbox').className = 'open';
});
document.getElementById('close').addEventListener('click', function(){
document.getElementById('lightbox').className = '';
});
document.getElementById('lightbox').addEventListener('click', function(e){
if(e.target.id == 'lightbox'){
document.getElementById('lightbox').className = '';
}
});
</script>
</body>
</html>style.css
#lightbox{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
background:rgba(0, 0, 0, 0.3);
display:none;
}
#lightbox.open{
display:block;
}
#lightbox_content{
position:absolute;
width:500px;
height:400px;
background:#ffffff;
border-radius:3px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-200px;
text-align:center;
}
#close{
position:absolute;
right:20px;
top:20px;
background:rgba(0, 0, 0, 0.2);
height:20px;
width:20px;
border-radius:15px;
text-align:center;
color:#ffffff;
cursor:pointer;
}Additionally, you can checkout a quick demo of that functionality here: https://codepen.io/devdojo/pen/EvGJpN
Comments (0)