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

的问题：

我希望模态对话框直接位于头部下方。所以我将modalDiv的顶部设置为$（window）.scrollTop（）+ $（'＃fixedDiv'）。css（'height'）。 $（'＃fixedDiv'）。css（'height'）的值因浏览器而异，在Chrome中，定位会受到是否显示工具栏的影响。有没有更好的方法来计算modalDiv的顶部？
当浏览器调整大小（或移动设备的显示在纵向和横向之间）时，我的ResizeModal函数（下面）将modalDiv的高度设置为$（window）.height（） - $（'＃fixedDiv'）。css（ '高度'）。同样，$（'＃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();
}

任何帮助都将不胜感激。

在浏览器调整大小期间初始模态对话框定位和调整大小

0 个答案: