Categories: Web Development
Please note that whenever I speak about a blanket, I’m referring to the transparent film that goes over the content to draw attention to the PopUp.
What this CSS does is position and style the general elements. The blanket, as discussed earlier, is the translucent color block placed over the content to bring out the popUp. popUpDiv is the name of our popUp div element. It’s important to know that both elements have their position attributes set to absolute. This means they are positioned at certain pixel measurements on your website relative to what object they’re in.
- toggle(div_id) – This simply toggles the inserted div name from being displayed (display:block) to being hidden (display:none).
- blanket_size(popUpDivVar) – This resizes the blanket to fit the height of the page because there is not height=100% attribute. This also centers the popUp vertically.
- window_pos(popUpDivVar) – This centers the popUp vertically.
- popup(windowname) – This function contains the other three to make life simple in the HTML file.
<div id=”blanket” style=”display:none;”></div>
<div id=”popUpDiv” style=”display:none;”>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Me To Close</a>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Here To Open The Pop Up</a>
The HTML places two your two CSS elements with display being set to none by default. I’ve noticed this is important for some reason.
Using the attribute onclick in our <a> tags, we can call our function: popup(); to do everything we need. It turns the popUp both on and off.
That’s all for now, if you’re having some trouble, click Here For The Demo and feel free to go ahead and grab any code you like.
- Hundredth Post – Looking Back On The Blog
- When to Open Links in New Windows
- How To Send Data From Flash To ASP/PHP Without A Page Refresh