Question

I have a 3-columns template in my web application.

Imagine that the right-side div is <div id="right"> In some pages I want to disable all contents in this div using another div that has a transparent background.

How can I do it?

(please tell me your suggestions with a click on <input type="button" id="btn" value="Disable" /> as a handler)

Answer 1

HTML:

<div id="rigth" style="position: aboslute; left: 999px; top: 10px;">Whatever</div> -> your style here… I used some random values

<div id="rigthCover" style="position: aboslute; left: 999px; top: 10px; opacity: 0.3; background: #fff; display: none;">Whatever</div> -> same as the before one, works in mozilla/chrome, you have to filter opacity for IE (alpha filter, google it you find it fast)

<input type="button" id="btn" value="Disable" onclick="disable()" />

Javascript:

function disable()
{
      document.getElementById("rightCover").style.display = "block";
}