Pure CSS Lightbox without JS

Pure CSS Lightbox without JS

Pure CSS Lightbox without JS

Here is a pure CSS lightbox made possible by use of the :target CSS selector.

I created this script for this website and I thought that anyone can use this script in their own website or blog so I'm sharing this on my website.


 <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>

1 comment:

Thank you for your comment.

 Image

 Image

About



I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Twitter
Facebook

Resume

Curriculum Vitae


Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA
mailpawanmall.net
www.pawanmall.net
Pawan Mall - resume photo avatar

Objective

I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Skills

  • Front-end
  • HTML/HTML5
  • CSS/CSS3
  • JS/jQuery
  • Bootstrap
  • Back-end
  • PHP/OOP
  • SQL/MySQL
  • Codeigniter Framework
  • cPanel & phpMyAdmin

Education

  • Sikkim Manipal University graduate of 2015.

Experience

  • Web Designer/Developer/Leads Manager ~ 2007-2017

Contact Form

Contact

  • New Delhi, Delhi, India

  • +91 **********

  • mailpawanmall.net

Follow me on :-