JQuery for gray parts of a web page

I have a design as shown in the image below and I have a requirement where the user can click a link in a rectangular area named A, B and C. When one click on the link here in box B, then the whole green area should be gray, except for BOX B , and this should happen with BOX A, C.

Example as shown in the picture. When the user opens the page One User open the page

When the user clicks on the BOX B link When User Click on the BOX B link

I'm not sure if this is possible if there is any similar example I can start with. I searched but couldn't find a similar example. This is usually an example related to a gray gray page.

I can do the same using onmouseover and replace the whole image with another image that has the surrounding area in gray. But I am not allowed to do it this way. I'm not sure if this is possible. I would appreciate it if you could point me in the right direction or if it is possible for a certain area of ​​the page in gray.

This page is for PHP scripts


source to share

6 answers

I created a small example for you which you can find here:


Its' basically using simple css z-index

to overlap / hide the whole place while the currently selected element was temporarily taller z-index

than the overlapping one <div>


You will notice that while the overlap <div>

is visible, you can click on the selected field. Anything else is not available (without removing the event handlers or so). Simply because there is another element that overlaps the rest.



On A / B / C click, you can add a div overlay with bg transparent gray and increase the z-index of the clicked element above the overlay.



One way to do this is to temporarily change the positioning of the element to absolute

and give it high z-index

and then add a layer below it that will act as an overlay.

You can also use a plugin like this one: http://jquerytools.github.io/documentation/toolbox/expose.html



Use an overlay div that will be positioned absolutely above anything else in your page with z-index, and then set the z-index of your click to overlay + 1.



There are several ways to do this, but a relatively quick and easy way is to make the elements you want grayed out in the same class. Then when you select an element, give that element an extra class and change the css for the above named elements except the selected element with the extra class.

This is a link describing one way to achieve this goal.



You can try to put div

in the area where A, B, C are located. In this div you would have background-color

like this:



When you either click a, b, or c, you activate ( display:block

), all of this and set the z.index of your a, b, or C to go up higher.

An alternative could be a plugin from jQueryTools called Expose.



All Articles