<center>
This is the main content. To display a lightbox click below icons. <hr/><br/>
   <a href="javascript:void(0)" onclick="document.getElementById('twitterLight').style.display='block';document.getElementById('twitterFade').style.display='block'" class="btn btn_left twitterbtn"><i class="fa fa-twitter-square fa-3x"></i></a>
                        
<a href="javascript:void(0)" onclick="document.getElementById('facebookLight').style.display='block';document.getElementById('facebookFade').style.display='block'" class="btn btn_right facebookbtn"><i class="fa fa-facebook-square fa-3x"></i></a> 
</center> 

<div id="twitterLight" class="white_content">
  <div class="heading">
    <span><i class="fa fa-twitter-square twitterbtn"></i> Twitter</span>
    <a href ="javascript:void(0)" onclick = "document.getElementById('twitterLight').style.display='none';document.getElementById('twitterFade').style.display='none'">X</a>
  </div>

  <div class="mainbody">
    <center>
    <a class="twitter-timeline"
  href="https://twitter.com/twitterapi"
  data-widget-id="550817849350971392"
  data-screen-name="Pawan_Mall"
  data-show-replies="false"
  data-tweet-limit="3" data-chrome=" nofooter noborders transparent" data-link-color="#cc0000">
Tweets by @Pawan_Mall
</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
    </center>
  </div>
</div>




<div id="facebookLight" class="white_content">
  <div class="heading">
    <span><i class="fa fa-facebook-square facebookbtn"></i> Facebook </span>
    <a href ="javascript:void(0)" onclick = "document.getElementById('facebookLight').style.display='none';document.getElementById('facebookFade').style.display='none'">X</a>
  </div>

  <div class="mainbody">
    <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMr.PawanMall&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:auto;width:100%;" allowTransparency="true"></iframe>
    </center>
  </div>
</div>
  <div id="twitterFade" class="black_overlay"></div>
  <div id="facebookFade" class="black_overlay"></div>

/* 
// Pure CSS Lightbox without JS
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
html{
  margin:10%;
  padding:5%;
}
body{
  display:inline-block;
  padding: 30px;
  border: 5px solid #e6e9ed;
  background-color: #656d77;
  color:#f5f7fa;
  border-radius:20px;  
}
.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: 10%;
   left: 15%;
   width: 80%;
   height: auto;
   z-index:1002;
   overflow: auto;
  }
.white_content .heading{
    width: 85%;
    height: auto;
    display:inline-block;  
    padding: 10px;
    border-top: 5px solid #e6e9ed;
    border-bottom: 0px solid #e6e9ed;
    border-left: 5px solid #e6e9ed;
    border-right: 5px solid #e6e9ed;
  background-color: #aab2bc;
    color:#656d77;
    border-radius:20px 20px 0px 0px ;  
}
.white_content .heading span{
    font-size:20px;
    color:#f5f7fa;
}
.white_content .heading a{
    float:right;
    font-size:13px;
    text-decoration:none;
    background-color:#da4453;
    padding:3px;
    text-align:center;
    color:#f5f7fa;
    width:16px;
    height:16px;
    border-radius:5px;
}
.white_content .mainbody{
    width: 85%;
    height: auto;  
    padding: 10px;
  border-top: 0px solid #e6e9ed;
    border-bottom: 5px solid #e6e9ed;
    border-left: 5px solid #e6e9ed;
    border-right: 5px solid #e6e9ed;
  background-color: #f5f7fa;
    color:#656d77;
    border-radius:0px 0px 20px 20px ;
}
.twitterbtn{
color: #55acee;
opacity:0.7;
}
.twitterbtn:hover{
opacity:1;
}
.facebookbtn{
color: #223770;
opacity:0.7;
}
.facebookbtn:hover{
opacity:1;
}

No need for any JS script... but Yes, you should have to use little bit of inline JS.

<a href ="javascript:void(0)" onclick = "document.getElementById('facebookLight').style.display='none';document.getElementById('facebookFade').style.display='none'">X</a>