[alhneiti]

Hello,

I got a web design that i am going to program using PHP and using AJAX. I am trying to create a layer for sending forgotten password to the user's email.
When the user clicks the Forgot password link i want to create a layer that will be displayed on top of the whole page content so that i can make it look like Web 2.0 techniques.

I tried DIVs but they dont seem to work properly, how can i go on with this idea?

Hints would be appreciated and a guide is even better.

Best Regards,
Rakan

[steveb]

While I have no duck-strangling idea what your problem is, would it not look just as Web 2.0 if, instead of conjuring up a new layer, you directed the user to a new page which only looks like the previous one with a layer on top?
No-one would ever know, less care, if they recover their password.

[alhneiti]

I saw some .NET forums that use this method, when you click login for example a new layer shows up on top of the whole page that asks you to enter username and password. My problem is that i am unable to use DIVs to create a layer that is on top of the whole page.

How can i show a HTML form on top of all page content using a div?

[Whitingx]

Something like this Orangoo Labs - GreyBox or this ThickBox 3.1 ?

Hope this helps.

[iblastoff]

come on. you want to use this technique just so you can look 'web 2.0'? give me a break.

[larrybn]

Originally Posted by alhneiti

Hello,
I tried DIVs but they dont seem to work properly, how can i go on with this idea?

You need to use CSS to make divs work.
position: absolute;
margin: 0px 0px 0px 0px;
width: whatever
height: whatever
padding: 0px auto;

then use top, bottom, left, right to move into position

then make the make the body have
padding: 0px 0px 0px 0px;

something along those lines, I think.

[brooks]

use lightbox, it's the most popular one.

Lightbox JS

[brendan hart]

I know alot of people use these lightbox stuff, what if you wanted to learn to do it yourself?

I just learnt some ajax stuff where I load my server information straight into the page without refreshing the page. I'm a bit reluctant on JS but I think most people have it enabled except schools and stuff I think.

[bluesage]

I would use existing classes such as lightbox, thickbox, and greybox. Less to think about, easy to get going. There are others out there I believe too, but cant remember right off the top of my head.

You could always study the mentioned classes, and then create your own.

As mentioned, would have to use CSS to place the div in the browser window.

As for javascript, its mostly designers and standard web users that have it enabled. Most businesses usually disable it for various reasons. But then dont forget mobile devices, text only browsers, they dont all support javascript.

[webfunkin]

Try putting a translucent div that covers the whole page. The width and height settings in css might be a problem. I am not sure if setting width:100%; height:100% will work or not.. Probably won't. And i still haven't figured out a way to set opacity that works in ie... Or you could take a screenshot of the background, and then cover it with a translucent black layer,this will be a gif image, and use the visibility settings to show it.. Dunno how much sense i am making..

[webfunkin]

or... try using some plugin from jquery... like thickbox or greybox..