Dor Zuberi Dor Zuberi - 1 year ago 74
Javascript Question

Make everything fade / blur besides a div

I want to make the same effect as when using a Lightbox.

The effect that i want is when you click on an image, everything looks blur besides the image in the center of the screen.

If it's done with JS please give an example with jQuery.

(click on an image).

Answer Source

Nevermind, thanks mate but i have managed to do it on my own :)

I wrote a short script which simply fades the site's DIV to 0.5 and then fade in the div I wanted out side of the main DIV, and it works!

See the code below:

<script type="text/javascript">
$('#messagesLink').click(function() {
    $('#wrapper').fadeTo('slow', 0.5, function (){

$('#exitLink').click(function() {
    $('#messageBox').fadeOut(function (){
        $('#wrapper').fadeTo('slow', 1); 
<div id="messageBox" style="display: none; width: 300px; height: 300px; position: absolute; top: 50px; left: 50%; margin-left: -150px; background-color: white; text-align: center; z-index: 9999">
    This is a text box! <a href="javascript:void(0);" id="exitLink">Click here to close!</a>.
<div id="wrapper" class="adminMainWrapper" style="z-index: -1">
    You have <a href="javascript:void(0);" id="messagesLink">5 new messages</a>

Now all I've left to do is to finish some minor things and tidy up this mess :) Thank you very much for your help! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download