代码之家 › 专栏 › 技术社区 › Mark Boulder

如何检查jQM弹出窗口是否适合用户的视口?

user-experience popup jquery-mobile

1

Mark Boulder · 技术社区 · 10 年前

所以我设法做到了 add scrollbars to large jQM popups with css('overflow-y', 'scroll') 。但如何做到这一点只有当弹出窗口大于用户的视口时?

我正在尝试 jquery-visible 插件,但我无法让它响应:

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

2 回复 | 直到 7 年前

1

3

ezanker 10 年前

您可以使用

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

2

0

SharpC Paul 4 年前

我的弹出窗口太大了,尽管这是因为有一个可搜索的列表。由于我想在滚动列表的同时将搜索字段保持在顶部,所以我必须这样做:

$("#confirmDialog").on({
    popupbeforeposition: function (e, ui) {
        var maxHeight = $(window).height() - 100 + "px";
        $("#confirmDialog .ui-content").css("max-height", maxHeight);
    },
    popupafteropen: function (e, ui) {
        var maxHeight = $(window).height() - 150 + "px";
        $("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
    }
});

记住不要对 maxHeight 一旦被指定为字符串,则这不起作用:

$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);

推荐文章

SaturnusK1 · 如何将UI工具包(例如Google Material)添加到Adobe Experience Design?

7 年前

Mohammad Hani · 路由时在配置中的templateUrl上应用条件

7 年前

MadeByDouglas · 希望将内容固定在视差标题下方的分段控制器上方

8 年前

Non · 我如何创建像Facebook或WhatsApp这样的搜索框?(移动)

9 年前

cogitoergosum · Android-一个非常大的阵列的用户界面,用于自动完成

10 年前

Mark Boulder · 如何检查jQM弹出窗口是否适合用户的视口?

10 年前