How to make a Lightbox with Background Blur

Screen Shot 2015-04-24 at 10.21.05

 

Making cool lighboxes is actually quite simple. You don’t have to use JQueryUI, Bootstrap, or some other thing to get a great looking lightbox with not much code.

The basic idea: Your lighbox is made of two divs. A container div that is the full width and height of the page, and inside that another div holds all the lightbox content. Using JavaScript, toggle the visability of the lightbox when certain elements of the page are clicked.

Now for some more details.

1. Add an html tag, and give it a meaningful class name. Here is mine:

<div class=”container-lightbox”></div>

2. Getting the div content. You could just statically put some code in the div you just wrote (see #1), but usually you need your lightbox to hold some dynamic content, such as a form to edit a product. Mine displays each of my portfolio projects. A nifty way I have found to do this is to use an ajax call to get the ‘page’ you want to display in the lightbox, and have the ajax return html. This is awesome because you can keep all your view files nicely organized, and works really well when you have to load dynamic content into your lightbox. The content can be complied together on the server, and sent over to you in a nice package by ajax, and you can then just dump all that into your lightbox. Here is how I set up my ajax call. I used jQuery, and already had a link set up that I wanted to toggle the lightbox. The link’s url was the url I wanted to get my lightbox content from.


var lightbox = $('.container-lightbox');
$('.project-thumbnail a').click(function(){
$.ajax({
url: $(this).attr('href'),
method: 'get',
success: function(data){
lightbox.fadeIn('fast').html(data);
},
dataType: 'html'
});
return false;
});

 

3. Toggling the lightbox. Once you get your content to show up in your lightbox div when you click your link, you are ready to toggle it’s visibility. Give your whole lightbox a style of display:none in your CSS. Then, in the success callback function of your ajax call, do something to set a display:block style for your lightbox. JQuery has some great functions for this. I used .fadeIn('fast')

Add a X symbol to the top of your lightbox, so some similar thing. Wire it up to some JavaScript so that when clicked, it will set the lightbox back to display:none . Here is mine.


lightbox.on('click', '.remove-lightbox', function(){
lightbox.fadeOut('fast');
return false;
});

4. Styling the lightbox. Now for the fun part. You can add some styles to your lightbox to make it look really classy. Here are mine (fyi, I’m using SASS, thus the nested statements. You can’t do that in normal CSS).


.container-lightbox{
display: none;
position: absolute;
z-index: 4;
top: 0px;
left: 0px;
width: 100%;
min-height: 100%;
overflow: hidden;
.body-lightbox{
border-radius: 3px;
padding: 20px 20px 40px 20px;
background-color: #fff;
width: 90%;
display: block;
margin: 40px auto;
overflow: hidden;
-webkit-box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
}
.remove-lightbox{
display: block;
text-align: right;
font-size: 3em;
margin: 10px;
}
}

Highlights of the above code: For your lightbox to appear above everything else, it’s important that it positioned absolutely, and that it’s z-index is higher than anything else on the page. It’s also important that the top and left are at 0. This is what puts the lightbox on top of everything else.

And now, for the blur background. For this I had to add some blur styles to all my things that are not my lightbox. I couldn’t just add them to the body, because that would blur the lightbox too. To do this I toggled adding a blur class when I toggled my lightbox. Here is my lightbox code again with the added lines.


var lightbox = $('.container-lightbox');
lightbox.on('click', '.remove-lightbox', function(){
lightbox.fadeOut('fast');
  $('.projects-container, header, footer').removeClass('blur');
return false;
});
$('.project-thumbnail a').click(function(){
$.ajax({
url: $(this).attr('href'),
method: 'get',
success: function(data){
lightbox.fadeIn('fast').html(data);
   $('.projects-container, header, footer').addClass('blur');
},
dataType: 'html'
});
return false;
});

And finally, my blur css class containing css that I shamelessly copied from the internet.


.blur{
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}

And that’s it. I would recommend messing around with absolute vs. fixed positioning for you lightbox. I’ve found fixed is better for small lightboxes, and absolute is better for large ones.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s