Simple Lightbox popup using jQuery and Bootstrap

Hi guys, It’s been so long we haven’t posted any tutorial. We are working on second version of user registration and management script in PHP, we have already sold more that 50 copies of the script :). Today in this post we will share a simple yet useful and easy to use script for an elegant light weight lightbox.You can use it to display call to action buttons to convert your audience into leads. We have used bootstrap and a little jQuery to create this pop up box quickly.

lightbox-infotuts

 

                             [sociallocker] DOWNLOAD CODE [/sociallocker]

So lets take a quick look at the code, below is our simple HTML markup:

<pre><div class=”container”>
<div class=”dark-bg”></div>
<div class=”row intro-bg”>
<div class=”col-md-12″>
<div id=”it-intro”>
<div class=”it-test-panel”>
<i class=”fa fa-times-circle closePopUp”></i>
<h3>Simple Popup Box</h3>
<p class=”subheading”>Easy to use simple popup box with call to action buttons</p>
<p class=”extensionText”>See our products<a class=”blue” href=”” target=”_blank” id=”extension”>Click Here</a></p>
<p class=”extensionText”>See our products<a class=”green” href=”” target=”_blank” id=”extension”>Click Here</a></p>
<p class=”extensionText”>See our products<a class=”red” href=”” target=”_blank” id=”extension”>Click Here</a></p>
</div>
</div>
</div>
</div>
</div></pre>

And using few lines of jQuery code does the magic, below is our jQuery code:

$(document).ready(function($) {
 setTimeout(function() {
 $('.dark-bg').fadeIn('300', function() {
 $('.intro-bg').slideDown('400');
 });
 },1000);
 
 $('.closePopUp').click(function(event) {
 $('.intro-bg').slideUp('300',function(){
 $(this).remove();
 $('.dark-bg').fadeOut('400', function() {
 $(this).remove();
 });
 });
 });
});

You can check our demo and download the code and use it in your web projects. This simple script will help and save your time 🙂 Please share this post with your friends and followers. We are coming up with some really useful scripts soon 🙂

 

1 thought on “Simple Lightbox popup using jQuery and Bootstrap”

  1. respected sir,

    popup box button is set for ‘while’ (or) ‘for’ looping concept. each popup button is clicking for fetching separate result in php mysql. please sir help me.

Comments are closed.