sporkd/popup-test.html

## popup-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>popup test</title>

  <style type="text/css" media="screen">

   #popups {
     position:absolute;
     width:670px;
     height:auto;
     top:100px;
     left:50px;
     margin:0;
     padding:0;
     z-index:1000;
   }
   .popup {
     width:670px;
     min-height:200px;
     display:none;
     background:#e4e4e4;
   }
   .popup .inner {
     padding:30px 36px;
   }
   .popup a.close {
     margin:0;
     position:absolute;
     z-index:9999;
     right:10px;
     top:4px;
     width:auto;
     height:22px;
   }
   .popup a.close span {
     background-image:url(close.gif);
     display:block;
     overflow:hidden;
     text-indent:-99999px;
   }
   .clear { clear:both; }

  </style>
  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" charset="utf-8">

    $(function() {

      $("a.open-popup").live('click', function(e){
        e.preventDefault();
        name = e.target.href.replace( /.*\//, "" );
        $("#popups .popup").hide();
        $("#popups #"+name).fadeIn(1000);
      });

      $("#popups a.close").live('click', function(e){
        e.preventDefault();
        $(e.target).closest(".popup").hide();
      });

    });

  </script>
</head>
<body>

  <ul>
    <li><a href="example1" class="open-popup">Link 1</a></li>
    <li><a href="example2" class="open-popup">Link 2</a></li>
  </ul>

  <div id="popups">

    <div id="example1" class="popup">
      <a href="#" class="close">close</a>
      <div class="inner">
        <img src="http://lolcats.com/images/u/07/46/lolcatsdotcom8pp72k4q7hzw06vy.jpg" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non ipsum vitae purus porttitor consequat. Nullam augue massa, dignissim a.
        </p>
        <ol>
          <li>
            Nam non ipsum vitae purus porttitor consequat.
          </li>
          <li>
             Nullam augue massa, dignissim a.
          </li>
        </ol>
      </div>
    </div>

    <div id="example2" class="popup">
      <a href="#" class="close">close</a>
        <div class="inner">
          <img src="http://lolcats.com/images/u/08/23/lolcatsdotcomcm90ebvhwphtzqvf.jpg" />
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non ipsum vitae purus porttitor consequat. Nullam augue massa, dignissim a.
          </p>
          <ol>
            <li>
              Nam non ipsum vitae purus porttitor consequat.
            </li>
            <li>
               Nullam augue massa, dignissim a.
            </li>
          </ol>
        </div>
    </div>

  </div>

</body>
</html>