How do you make elements under a div layer inactive?

Hi, I have a css style that makes certain portions of my site appear inactive until they are clicked.  The css places a div over the area with a layer that has an opacity set to 60% so it appears grayed out.

The problem is that the content underneath the opacity layer is still active.  IE: you can still copy text, click links, etc.  I can't turn this activity off permanently, as when they click to take the layer off, the content then becomes active.

I need a way to make it so the content under the layer is inactive when the opacity layer is over it.

Thanks for any help.  My code below contains my CSS styles and the div container.
<!-- Grayout area -->
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
	top:0;
	left:0;
        z-index:1;
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;
-khtml-opacity:0.5;
        background-color:#CCCCCC;
 
		
        }
div.over_content {
        width: 100%;
        height: 100%;
        z-index:2;
		vertical-align:middle;
		
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		font-size:54px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
.edit_this_small {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		font-size:20px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
<!-- Grayout area -->
 
 
 
 
<div class="container"> 
  <div id="content_canvas" class="content">
    Content that is under the layer.  <a href="link.html">Link that should be inactive when layer is over it.</a>
  </div>
  <div id="over_content" class="over_content" align="center"><a class="edit_this" href="edit2.jsp">Edit This</a>
  </div>
</div>

Open in new window

LVL 1
Shaye LarsenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

quincydudeCommented:
Set the "inactive" DIV with style
#mydiv
{visibility:hidden;}
and enable it by
mydiv.style.visibility="visible";
by javascript at run time
0
Shaye LarsenAuthor Commented:
Thanks for your comment.

visibility:hidden makes the content div completely hidden.  In the code above you will see that I am using opacity because we need to be able to see the content underneath.  But it just can't be active.  Meaning, while the cover layer is on top, you shouldn't be able to click links underneath.
0
quincydudeCommented:
Hmm... what about the greyout approach? somethingl like that mentioned in
http://www.hunlock.com/blogs/Snippets:_Howto_Grey-Out_The_Screen

but you place a whole screen div, which is  transparent and set the z index between your bottom div and the top div so it filters out all user actions that can affect the bottom div.
0
Shaye LarsenAuthor Commented:
Thanks for the suggestion.

I have a gray out element going.  I can't do it on the whole screen as I just need to to work over certain tables.

I just took a stab a using the z-index and set the bottom layer to 1 and the top layer to 60.  It had no effect.

Below is my z-index rankings.
<!-- Grayout area -->
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
		z-index:1;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
	top:0;
	left:0;
        z-index:2;
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;
-khtml-opacity:0.5;
        background-color:#CCCCCC;
 
		
        }
div.over_content {
        width: 100%;
        height: 100%;
        z-index:40;
		vertical-align:middle;
}
div.over_over_content {
        width: 100%;
        height: 100%;
        z-index:50;
		vertical-align:middle;
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:60;
		text-align:center;
		font-size:54px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
.edit_this_small {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
		font-size:20px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
<!-- Grayout area -->

Open in new window

0
Shaye LarsenAuthor Commented:
We were able to accomplish this by converting table structures to DIVs.  We still have tables, but using DIVs as controllers, we were able to get this to work.  The problem is that tables do not support CSS like DIVs do.  
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.