Simple LightBox Without jQuery

Simple LightBox Without jQuery

by Shariq Khan

HTML

<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Show PopUp</a>

<div id="light" class="white_content">
<div class="lb-inner">
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="textright">Close</a>
<!--<img src="http://localhost/wptest/wp-content/uploads/2018/08/jumbotron.jpg"/>-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/9UVjjcOUJLE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="fade" class="black_overlay"></div>

CSS

.black_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);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 5px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
    overflow: hidden;
}
img, iframe {
  max-width:100%;
  margin:0 auto;
  height:auto;
}
.textright {
    position: absolute;
    right: -20px;
    top: -20px;
}
.lb-inner {
  position:relative;
}