Getting a popup box to display in the middle of the screen

Question

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.

My current try has lots of failing when the vertical screen size small.

It also needs to be responsive. Can any one point to a tutorial or snippet with a solution.

    function openPopUp( item ) {
    var render_height = $('body').height();
    $('.black_overlay').height(render_height + 'px');
    $('.black_overlay').show();
    $('#popup').show();
    var html ='';
    html += '<h6 class="popup-header">More Information About the Debt</h6>';
    html += '<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;">'; 
    html += '<table style="width:100%;">';
    html += '<tr><td>First Name</td><td>' + $(item).attr("hidden-data-dfname") + "</td><tr>";
    html += '<tr><td>Last Name</td><td>' + $(item).attr("hidden-data-dlname") + "</td><tr>";
    html += '</table>';
    $('#popup').html(html);
} // end method openPopUp


function closePopUp() {
    $('#popup').hide();
    $('.black_overlay').hide();
} // end function closePopUp


    <div id="popup">
    </div>  
      <div id="fade" class="black_overlay"></div>

    .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%; 
}

Answer 1

use only this much css for horizontal and vertical centering of div

#popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

No JavaScript and no calc etc. And it will remain in the center whatever screen size may be.

Answer 2

I solved using https://jqueryui.com/dialog/#modal-message

You have a div containing your modal content:

<div style="display: none;" id="terms-of-use-modal"... your dialog html here

Then a function that initializes the modal with responsive dimensions:

function init_dialog(){
  var modal_width = $(window).width() - ($(window).width() / 3);
  var modal_height = $(window).height() - 50;

  $("#terms-of-use-modal").dialog({
    modal: true,
    width: modal_width,
    maxHeight: modal_height,
    dialogClass: 'terms-of-use-dialog',
    buttons: {
      Ok: function(){
        $(this).dialog("close");
      }
    }
  });
}

And that link is clicked the modal will appear:

$("#terms-of-use-link").on("click", function(evt){
  evt.preventDefault();
  init_dialog();
});

You can also use init_dialog function anytime you want modal visible. You can add css settings like:

#terms-of-use-modal { ... }