如何检查jQM弹出窗口是否适合用户的视口? [英] How to check if jQM popup fits user's viewport?

问题描述

因此，我设法将滚动条添加到具有以下内容的大型jQM弹出窗口中css('overflow-y', 'scroll') .但是，当弹出窗口大于用户的视口时，如何仅执行此操作?

So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?

我正在尝试使用 jquery-visible 插件，但我无法获得它回应:

I'm trying with the jquery-visible plugin but I can't get it to respond:

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

推荐答案

您可以使用

overflow-y: auto

这使滚动条仅在需要时可见.

This makes the scrollbar only visible when it is needed.

更新了 FIDDLE

Updated FIDDLE

更新:

您也可以使弹出窗口的内容可滚动，以便标题栏保持在视图中:

You can also just make the content of the popup scrollable so the titlebar remains in view:

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

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

演示

DEMO

这篇关于如何检查jQM弹出窗口是否适合用户的视口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！