Первоначальное модальное позиционирование и изменение размера диалога во время изменения размера браузера

Question

Я пытаюсь найти лучший способ для первоначального позиционирования и изменения размера модального диалога во время изменения размера браузера. У меня есть веб-страница с элементами div для модального заголовка, фиксированной позицией заголовка страницы и телом с абсолютным позиционированием, которое можно прокручивать без движения головы:

Мой HTML:

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

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

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

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

Мой 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;
    }

Вопросы:

1. Я хочу, чтобы модальный диалог располагался прямо под головой. Поэтому я установил верхнюю часть modalDiv в $(window).scrollTop() + $('#fixedDiv'). Css ('height'). Значение $ ('# fixedDiv'). Css ('height') варьируется в зависимости от браузера, и в Chrome на позиционирование влияет то, отображается панель инструментов или нет. Есть ли лучший способ рассчитать вершину modalDiv?
2. Когда размер браузера изменяется (или отображение мобильного устройства переключается между книжным и альбомным режимами), моя функция ResizeModal (ниже) устанавливает высоту modalDiv в $(window).height() - $('#fixedDiv'). Css ('height').). Опять же, $('#fixedDiv'). Css ('height') варьируется в зависимости от браузера. Кроме того, на iPhone размер и внешний вид навигационных панелей различаются в зависимости от способа прокрутки экрана пользователем. Кто-нибудь знает, как с этим бороться?

Мой 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();
}

Любая помощь будет оценена.