Login page with transparency

[timmah100]

Not sure if this is the right place to post this, but here goes.

I need to have a type of "splash" login page for the front page of this website I have done.
What they want is, the front page be seen in the background, but a transparency cover the front page with a login box.
They don't want anybody to access the site unless they have a user ID and password, but they want the site to be seen in the background but the site not work unless they're logged in.

Does this make sense?

Any help would be greatly appreciated.

[WesleyC]

It's not possible to be truly secure in this way, unless the "front page" you're seeing in the background is either so stripped down as to be nonfunctional or is just a screenshot of the front page, not the actual front page.

The way this sort of "modal" dialog works, you display a "panel" div (set to 100% width and height) that is half transparent with a high z-index, and another div placed on top of it with an even higher z-index. Then, you place your login prompt on this second div. When the user logs in, you set the display property on both of these divs to display: none.

However, any Firefox user with any skill whatsoever (and, I highly suspect, any user of any other browser) will be able to defeat your login "requirement" with a browser plugin, or simply by viewing the page source, or by disabling Javascript, or by disabling CSS, or... well, you get the idea.

In essence, it's not going to work as planned.

[DrDoc]

It would, however, be possible to load obfuscated/jumbled text using AJAX.
But simply covering the "real" contents is not going to work the way you expect.