Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

CSS "Popup Window" (See related posts)

// Example of a css based "popup window"

	Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;">here</span></a>
	<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>
	This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
	<br />
	<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a></div>
	</div>
to css by tracyfloyd on Thu Sep 28 21:58:52 +0000 2006

Comments on this post

okcowt posts on Oct 19, 2007 at 22:04
This is cool...how can i add a timer so it goes away
Remaei posts on Mar 15, 2010 at 15:45
Tracy, am gonna buy you beer for this script !!! definitely BEST BEST way to call hidden DIV! Today i was spend allmost 10hours searching fot that and everybody was posting how to show/hide DIV using javascript!!! damn man! i dont want to use javascript! So if anybody read that! dont lose your time searching it! just use this code that Tracy was post!!!

THANKS AGAIN!!!!!!!!!!!!!!!!!
JohnMazz posts on Apr 10, 2010 at 21:37
This is great! (signed up for an account just to say thanks!)

I made a slight modification to make the window appear on mouse over, and disapear on mouse out:

	Click <a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">here</span></a>
	<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>
	This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.


It was an easy fix, but others might wonder. If this mod isn't quite right, feel free to correct, but it worked for me.

Thanks again!
JohnMazz posts on Apr 10, 2010 at 21:38
whoops, missing the closing div on that last post.
macgregorharp posts on May 12, 2010 at 18:59
Hey guys, Im trying to apply this code to multiple gifs on my webpage, but I can only do it to one. Am I doing this right? I just want to be able to set a different description for each Gif!

<div>
<div id="agent"> <img src="images/agents.gif" alt="agents"></div> </span></div>
<div id='PopUp' style='display: none; position: fixed; left: 50%; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 200px;'>
A Book about real-estate agents.
</div>

You need to create an account or log in to post comments to this site.


Related Posts