title: Getting a popup box to display in the middle of the screen
body: <p>I need a tutorial of a box that displays in the vertical middle of the screen a swell as the horizontal middle of the screen. </p>
  
  <p>My current try has lots of failing when the vertical screen size small.</p>
  
  <p>It also needs to be responsive. Can any one point to a tutorial or snippet with a solution.   </p>
  
  <pre><code>    function openPopUp( item ) {
      var render_height = $('body').height();
      $('.black_overlay').height(render_height + 'px');
      $('.black_overlay').show();
      $('#popup').show();
      var html ='';
      html += '&lt;h6 class="popup-header"&gt;More Information About the Debt&lt;/h6&gt;';
      html += '&lt;img src="images/cancel30.png" width="20" height="20" onclick="closePopUp();" style="display:block;margin-top:10px;margin-bottom:10px;margin-left:auto;margin-right:auto;cursor:pointer;"&gt;'; 
      html += '&lt;table style="width:100%;"&gt;';
      html += '&lt;tr&gt;&lt;td&gt;First Name&lt;/td&gt;&lt;td&gt;' + $(item).attr("hidden-data-dfname") + "&lt;/td&gt;&lt;tr&gt;";
      html += '&lt;tr&gt;&lt;td&gt;Last Name&lt;/td&gt;&lt;td&gt;' + $(item).attr("hidden-data-dlname") + "&lt;/td&gt;&lt;tr&gt;";
      html += '&lt;/table&gt;';
      $('#popup').html(html);
  } // end method openPopUp
  
  
  function closePopUp() {
      $('#popup').hide();
      $('.black_overlay').hide();
  } // end function closePopUp
  
  
      &lt;div id="popup"&gt;
      &lt;/div&gt;  
        &lt;div id="fade" class="black_overlay"&gt;&lt;/div&gt;
  
      .black_overlay{
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index:1001;
      -moz-opacity: 0.8;
      opacity:.80;
      filter: alpha(opacity=80);
  }
  #popup {
     position: fixed;
     display: none;
     top: 25%;
     overflow: hidden;
     border: 1px solid #CCC;
     background-color: #F9F9F9;
     border: 1px solid #333;
     width: calc(100% - 42px);
     z-index: 1002;
  }
  #popup table {
      margin-left:5px;
      margin-right:5px;
      margin-bottom:10px;
  }
  .popup-header {
      padding:5px;
      background:#006;
      color:#FFF;
      text-align:center;
      width:100%; 
  }
  </code></pre>