1

我试图找到在浏览器调整大小期间初始定位和调整模式对话框大小的最佳方法。我有一个带有用于模态的 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();
}

任何帮助，将不胜感激。

4

0 回答 0