how to have an overlay box like facebook does

[jasonc]

I am wanting my visitors to click an image and have information popup in am overlay style box with either a X in the top corner or click the close button to close the pop up overlay.

 

How would one do this ?

 

oh and without using jquery or other downloaded apps

[freelance84]

Send the id of the image to js which in turn sends the id to your Ajax processor on the server which in turn echo's back the relevant data in the form of response.Text. Your js can then show the container you wish to display the content in and populate it accordingly with the response.Text

 

Job Done.

 

ps// The "container" is absolutely positioned on the page with a higher z-index than those under it. This isn't (i dont think) purely CSS but a combination of CSS AJAX and PHP (Based on the q in your OP)

 

[cags]

Is there a particular reason you don't want to use jQuery, it will make life easier being able to use it's DOM manipulation tools. You could of course just download fancybox or lightbox implementations, but again you say you don't want to do this. The actual displaying of an overlay is just a case of giving an element a z-index higher than everything on the page, and making it fill the screen, there are a couple of ways of doing this, depending on taste and how much browser support you want.

 

Making it display is just a case of adding a click event to the image, and hiding it with a click event on the cross. You can either have the overlay content on the page the whole time, but with display none, then simply use javascript to set it's display value, or you can make an AJAX request to fetch the actual data from the server. The possibilities are endless and without more details there's not a lot we can do to help short of writing something for you (which we don't do) that could be in-appropriate anyway. On a side note the JS stuff should perhaps be a seperate thread in the JavaScript board, linking to this one if you see it as relevant.