A Pen by Avaz Bokiev.

index.html

<p>This is the main content. <a href="#" id="open">Open</a></p>
<div id="light" class="lightbox">
  <img src="http://lorempixel.com/output/city-q-c-640-480-3.jpg" alt="" />
  <a href="#" id="close">&#x2715;</a>
  <span class="lightbox-caption">This is the image caption.</span> 
</div>
<div id="fade" class="overlay"></div>

Responsive-Vanilla-JS-Lightbox.markdown

Responsive Vanilla JS Lightbox

using only JS and CSS

A Pen by Avaz Bokiev on CodePen.

License.

script.js

document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';


document.getElementById('open').addEventListener('click', function() {
  document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block';
});


document.getElementById('close').addEventListener('click', function() {
  document.getElementById('light').style.display='none';
  document.getElementById('fade').style.display='none';
});

style.css

.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);
}
.lightbox{
    display: none;
    position: absolute;
    top: 15%;
    left: 25%;
    width: 50%;
    height: auto;
    padding: 10px;
    background: white;
    z-index:1002;
}

#close{
  background: #000;
  color: #fff;
  text-decoration: none;
  width: 20px;
  height: 20px;
  line-height: 1.3;
  text-align: center;
  border: solid 2px #fff;
  border-radius: 20px;
  position: absolute;
  padding: 3px;
  right: -10px;
  top: -10px;
}

.lightbox-caption{
  background: #000;
  color: #fff;
  text-decoration: none;
  width: 100%;
  height: auto;
  line-height: 1.3;
  text-align: center;
  border: solid 2px #fff;
  border-radius: 20px;
  position: absolute;
  padding: 3px;
  bottom: -40px;
  left: -5px;
}



.lightbox img{
  max-width: 100%;
  min-width: 100%;
}