Pop-ups using CSS

I have been looking for a code that will enable us to have pop-ups in our website.  I immediately thought of CSS and decided to Google for the code.  However, most of the answers I came across made use of a combination of Javascript and CSS.  Also, I needed the CSS code to be inline as I am making the pop-ups within the editing window of the CMS.

This one's the best one I have found so far.  Best of all, Drupal is accepting the code.

Here it is:

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;">Closespan></a>div>
 </div>

Unfortunately, the pop-up would not work here in Blogger, so you have to test it in your own page.

This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.

Close

This code is from Joyent.  There are suggestions for minor tweaks in the comments area.  Worth a look.