black out/disable window onClick

[mark_nsx]

Hi there! I would like to know how to go about blacking out/disabling the whole window
when a user triggers an onClick event just like in thefind.com (click Login or Add a Product
at the bottom of the page). Any ideas guys? Cheers!

Here's the URL: http://thefind.com/main/query.php?qS=usr&query=nike

[fenway]

It's not disabled, it's just an opacity...

[mark_nsx]

I got the opacity sorted out and disabling of the scrollbars (overflow: hidden), but how do they manage to show the login popup? I have tried appending my form's code in the body innerHTML but I end up with the form having blacked out as well. Thanks for the help! Cheers =)

[fenway]

I assumed it was a modal dialog...

[mark_nsx]

yes it is..i figured out how to show the dialogs using AJAX..now I need to work out
how to disable the widgets behind the opaque layer..

[Zeon]

i would do it like this:
first the css:
[code]
body, html{
  width:100%;
  height:100%;
  overflow:hidden;
}

div#black_out{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#888;
opacity:0.5;
filer:alpha(opacity=50);
-moz-opacity:0.5;
}[/code]

js:

[code]
function blackOut(){
var div = document.createElement('div')
div.id = 'black_out' // or div.setAttribute('id','black_out')
document.body.appendChild(div)
}

function hideBlackOut(){
var div
if (div = document.getElementById('black_out')
    document.body.removeChild(div)
}

function showDialog(){
blackOut()
// code for dialog...
return false
}

function hideDialog(){
hideBlackOut()
// -- code for hiding the dialog
}
[/code]

html:

[code]
<a href="javascript:showDialog()">show dialog</a>
<!-- OR -->
<a href="#" onclick="showDialog()">show dialog [onclick]</a>
[/code]