Initial Modal Dialog Positioning and Resizing During Browser Resize

Question

I'm trying to find the best way to initially position and resize a modal dialog during a browser resize. I have a Web page with divs for the modal, a fixed positioned page head, and an absolute positioned body that can scroll without the head moving:

My HTML:

<div id="modalOverlayDiv" >
</div>

<div id="modalDiv">
  Modal Dialog Body ...   
</div>

<div id="fixedHeadDiv">
  Head Body ...
</div>

<div id="absoluteBodyDiv" >
  Page Body ...
</div>

My CSS:

    #modalOverlayDiv
    {
    position: fixed;
    visibility:hidden;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);    
    z-index: 300;
    }
    #modalDiv
    {    
      text-align:center;
      padding:0px;
      display:inline-block;   
      position:absolute;           
      overflow-y:auto ;
      overflow-x: hidden;
      margin:   0 auto; 
      left:0;
      right:0;
      width:100%;
      z-index: 400;
    }
    #fixedHeadDiv
    {
      position:fixed;
      width:100%;    
      margin:0px 0px 0px 0px;
      z-index:250;
    }
    #absoluteBody
    {
      position:absolute;     
      margin-left:auto;
      margin-right:auto;      
      text-align:center;    
      left:0px;
      top:60px;
      z-index:200;
    }

Issues:

1. I want the modal dialog to be positioned directly under the head. So I set the modalDiv's top to $(window).scrollTop() + $('#fixedDiv').css('height'). The value of $('#fixedDiv').css('height') varies among browsers, and in Chrome the positioning is affected by whether a toolbar is displayed or not. Is there a better way to calculate modalDiv's top?
2. When the browser is resized (or a mobile device's display goes between portrait and landscape), my ResizeModal function (below) sets modalDiv's height to $(window).height() - $('#fixedDiv').css('height'). Again, $('#fixedDiv').css('height') varies among browsers. Also, on the iPhone the size and appearance of the navigation bars vary depending on which way the user is scrolling the screen. Does anyone know how to deal with this?

My jquery:

function ResizeModal() {   
  $('#modalDiv').css('height', parseInt($(window).height())  -
                             parseInt($('#fixedDiv').css('height')));
}

$(window).on('resize', function () {
  ResizeModal();
});

function DisableScrollOnBody() {
   windowYOffset = $(window).scrollTop();
   $('body').addClass('scrollDisabled').css('margin-top', -windowYOffset);
}

function ShowModal() {
  $("#modalOverlayDiv").css('visibility', 'visible');
  $('#modalDiv').css({ top: $(window).scrollTop() + 
                          parseInt($('#fixedDiv').css('height'))});
  $('#modalDiv').css('height', parseInt($(window).height())  -
                             parseInt($('#fixedDiv').css('height')));
  $("#modalDiv").css('visibility', 'visible').show('fast');
  DisableScrollOnBody();
}

Any help would be appreciated.