title: how do I center javascript css popup div, no matter what the screen resolution?
body: <p>I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it's 100px from the top (already got that through the CSS #dialog) and also in the center of the screen, no matter what the user's resolution is?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript"&gt;
          function showPopUp(el) {
              var cvr = document.getElementById("cover")
              var dlg = document.getElementById(el)
              cvr.style.display = "block"
              dlg.style.display = "block"
              if (document.body.style.overflow = "hidden") {
                  cvr.style.width = "1024"
                  cvr.style.height = "100%"
              }
          }
          function closePopUp(el) {
              var cvr = document.getElementById("cover")
              var dlg = document.getElementById(el)
              cvr.style.display = "none"
              dlg.style.display = "none"
              document.body.style.overflowY = "scroll"
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          #cover {
              display:        none;
              position:       absolute;
              left:           0px;
              top:            0px;
              width:          100%;
              height:         100%;
              background:     gray;
              filter:         alpha(Opacity = 50);
              opacity:        0.5;
              -moz-opacity:   0.5;
              -khtml-opacity: 0.5
          }
  
          #dialog {
              display:    none;
              left:       100px;
              top:        100px;
              width:      300px;
              height:     300px;
              position:   absolute;
              z-index:    100;
              background: white;
              padding:    2px;
              font:       10pt tahoma;
              border:     1px solid gray
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="cover"&gt;&lt;/div&gt;
  &lt;div id="dialog"&gt;
      My Dialog Content
      &lt;br&gt;&lt;input type="text"&gt;
      &lt;br&gt;&lt;input type="button" value="Submit"&gt;
      &lt;br&gt;&lt;a href="#" onclick="closePopUp('dialog');"&gt;[Close]&lt;/a&gt;
  &lt;/div&gt;
  &lt;a href="#" onclick="showPopUp('dialog');"&gt;Show&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>