Simple OnClick lightbox using javascript and CSS

Simple lightbox onclick using javascript and css, now a days most most of us using jquery for lightbox, but here we are going to see the simple one, by using simple javascript and css. by that way let see how we are going to do the light box on click.

DOWNLOAD               LIVE DEMO

CSS CODE

<style rel="stylesheet" type="text/css">
* {
    margin: 0;
    padding: 0;
}
.contanier {
    width: 200px;
    padding: 10px;
    margin: 0 auto;
    margin-top: 200px;
    cursor: pointer;
    border: 0px green dashed;
}
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 6850;
}
.lightbox_table {
    width: 100%;
    height: 100%;
}
.lightbox_table_cell {
    vertical-align: middle;
}
#lightbox_content {
    width: 450px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ebdc9b;
    min-height: 30px;
    padding: 15px;
    border: 5px solid #FFFFFF;
    text-align: justify;
    text-indent: 15px;
    line-height: 1.5;
}
</style>

HTML CODE

html and javascript code

<div class="contanier">
  <h3 align="center"> Click on the below image to lightbox </h3>
  <a onClick="document.getElementById('lightbox').style.display='inline';" > 
    <img src="inextlogo.png" alt="logo" border="0"/><br>
  <h4 align="center">Logo of 1next2</h4>
  </a> </div>
<div id="lightbox" class="lightbox" style="display:none" onClick="document.getElementById('lightbox').style.display='none';">
  <table class="lightbox_table">
    <tr>
      <td class="lightbox_table_cell" align="center"><div id="lightbox_content"> 
        <span> Light box sample text <a href="http://1next2.blogspot.com">1next2.blogspot.com </a> </span> 
      </div></td>
    </tr>
  </table>
</div>

i hope this simple lightbox onclick using javascript and css is really useful to you.. thank you.