javascript - show div on click with rest of background blur - Stack Overflow

admin管理员组

文章数量:1276782

after reading some questions here , still i m doubtful about how to make a div appear on click on a link like the one in google plus view all friends , when we click on view all then a div appears on the center of the page and rest of background goes blur/opaque . can any one help me with the code , thanks

like here when we click on upload photos a div appear and the background gets little blur

after reading some questions here , still i m doubtful about how to make a div appear on click on a link like the one in google plus view all friends , when we click on view all then a div appears on the center of the page and rest of background goes blur/opaque . can any one help me with the code , thanks

like here when we click on upload photos a div appear and the background gets little blur

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 3, 2020 at 12:27 crusy 1,51233 gold badges2828 silver badges5858 bronze badges asked Nov 15, 2011 at 16:01 Sakshi SharmaSakshi Sharma 1,47244 gold badges2020 silver badges3939 bronze badges 3

• What you want is called a "lightbox", and is easiest to acplish using a lightbox plugin. – Sjoerd Commented Nov 15, 2011 at 16:03
• no not a lightbox . i cannot include a full php page inside a lightbox , it does not work , i want it simple like we click on a link a div appears on center of page and rest of the background gets blur – Sakshi Sharma Commented Nov 15, 2011 at 16:06
• Yes you can, its a thing called an IFrame – rickyduck Commented Nov 15, 2011 at 17:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I created a JSBIN to show you a nice effect:

DEMO

$('.open').click(function(){
  $('#lightbox').fadeTo(1000, 1);
  $("#wrapper").css({'text-shadow': '0px 0px 10px #000'});
});

$('.close').click(function(){
  $('#lightbox').hide();
  $("#wrapper").css({'text-shadow': '0px 0px 0px #000'});
});

This is just an idea, now is up to you to play with details!

---

You need: -a hidden DIV (#lightbox) position:absolute display:hidden that will cover all your page. To get the initial ~crossbrowser 'blurish' effect just set as a background a white .png 50% transparent.
- to create the blur effect yust made the 'main' text transparent and set an initial '0px' blur:

color: transparent;
text-shadow:0px 0px 0px #000;

than the jQuery will handle the blur 'togles'.

Here is a small sample done for you in jsfiddle http://jsfiddle/pramodpv/KwzWn/

The working: When you click the show link, we show a div (in the ex "opacity-provider"), this div is styled to fill the entire screen and some opacity is applied, also its z-index is put such that it is greater than the current data so that it es on top.

After this the data which you want to show is applied a z-index even greater than the opacity-provider, so this es over the opaque part.

Hope this helps!!

Look at the jQueryUI dialog http://jqueryui./demos/dialog/

or at fancyform http://www.fancyform

There are examples and demos how they work.

本文标签： javascriptshow div on click with rest of background blurStack Overflow