如何检查是否JQM弹出符合用户的视口?(How to check if jQM popup fits

2019-10-19 18:51发布

所以,我已经成功地滚动条添加到大JQM弹出窗口用css('overflow-y', 'scroll') 但如何做到这一点, 只有当弹出比用户的视口大?

我与尝试的jQuery可见的插件,但我不能让它回应:

http://jsfiddle.net/mmRnq/124/

$('#test-button').on('click', function(e) {     
  $('#confirmDialog').popup('open');

  // https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport  

  if(!$('#confirmDialog').visible(true)) {
    alert('Popup not fully visible - add overflow scrolling');
    $('#confirmDialog').css('overflow-y', 'scroll'); 
  }  
});

Answer 1:

您可以使用

overflow-y: auto

这使得在需要时滚动条才可见。

更新FIDDLE

更新:

你也可以让弹出可滚动的内容,这样的标题栏仍然看法:

#confirmDialog .ui-content {
    overflow-y: auto;
}

$('#confirmDialog').on({
  popupbeforeposition: function() {
      var maxHeight = $(window).height() - 120;
      $('#confirmDialog .ui-content').height(maxHeight);
  }
});

DEMO



文章来源: How to check if jQM popup fits user's viewport?