How to make this webpage effect?

[SONYFX]

http://www.baseestate.com/default.aspx

When you click "Sign in" on the top right of the page the background will darken and there's a prompt window showing up. Is this some sort of AJAX? What is this effect called?

 

[BitByBit]

I see no reason why this couldn't be done with DHTML. In that case, it would be simply a matter of assigning event handlers to the onclick event.

Something like this perhaps:

function changeBG () {
document.body.style.backgroundColor = 'gray';
}

...

<a href="#" onclick="changeBG()">Sign In</a>

As for the sign-in box, that would involve setting the visibility parameter of the particular form element to visible from hidden.

 

[esun]

It's not just the background color that grays, it's the entire screen. You'd need some other code for that part. I can almost guarantee you can find such code online, though.

 

[BitByBit]

Actually it looks like nothing more than a partially transparent layer overlayed over the welcome page, whose visibility property is initially set to hidden. When the user clicks the links, its visibility property gets set to visible, and the uppermost layer becomes visible. Nice design.

 

[TheStu]

That reminds me of the design on iusethis.com. when you select to view a screenshot, the page dims, a small white square appears and then stretches itself, first vertically then horizontally to display the image. Very cool design if you ask me.

 

[reverend boltron]

I think I found it in their javascript files..

$ function


showLoginBox functions

overlayReload('elb_overlay_login');

center, overlayReload, hideSelects

It seems like it is in the overlayReload function at.. $(overlay).show();

I would check the CSS files too.

 

[bchalker]

It's a "Lightbox" effect and can be VERY effective when used properly. Check out jQuery (www.jquery.com) and some of the Plugins available. It's a free (and powerful) Javascript library you can use, and you'll probably find yourself using it for more than the Lightbox (or Thickbox, etc.).