title: Positioning Alert Box
body: <p>I have a Custom Alert box which gets displayed on a clicking of a row in a table. When I have multiple rows, I scroll down and click a row. The alert box gets displayed only at the top. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var d = document;
    var c_obj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    c_obj.id = "contain";
    c_obj.style.height = d.documentElement.scrollHeight + "px";
    var alertObj = c_obj.appendChild(d.createElement("div"));
     alertObj.id = "alert";
     if (d.all &amp;&amp; !window.opera)
     alertObj.style.top = document.documentElement.scrollTop + "px";
     alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
     alertObj.style.visiblity = "visible";
    var h3 = alertObj.appendChild(d.createElement("h3"));
     h3.appendChild(d.createTextNode(name));
    var msg = alertObj.appendChild(d.createElement("p"));
     msg.innerHTML = "Links : " +Links+'&lt;br&gt;';
     var btn = alertObj.appendChild(d.createElement("a"));
     btn.id = "close";
     btn.appendChild(d.createTextNode('ok'));
     btn.focus();
     btn.onclick = function() {
     c_obj.parentNode.removeChild(c_obj);
     };
     alertObj.style.display = "block";
     </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#contain{position:absolute;top:0;}
  #alert{background:#CCE6FF;padding:10px;width:600px;height:250px;margin:300px;border-radius:15px;border:1px solid #a1a1a1;overflow-y: auto;}
  #close{padding:5px; background:blue;color:white;border-radius:5px;cursor: pointer;}</code></pre>
  </div>
  </div>
  </p>
  
  <p>What can I do to display the alert box in the center of the page no matter which row I click using CSS and JS</p>