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

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

user-experience popup jquery-mobile

Mark Boulder · 技术社区 · 11 年前

所以我设法做到了 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 年前

ezanker 11 年前

您可以使用

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

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

推荐文章

bhargav porapu · 如何在Selenium中自动执行此弹出窗口?[副本]

7 年前

Dkna · 弹出按钮未在Laravel中显示

7 年前

clustervely · 使用glide库,在自定义弹出窗口中显示图像

7 年前

Paul Thompson · Visualforce页面在新页面中打开,我希望它在新选项卡中打开?有人能帮忙吗

7 年前

Kyle · ElectronJS-如何在后台弹出

7 年前

J. Paul · 如何使弹出模型自动显示

7 年前

Skalwalker · 等待调度信号时,将控制器视为弹出窗口

7 年前

user7383259 · 如何在ionic popup中使用自动对焦光标

7 年前

Akinsam · 弹出窗口无法在应用浏览器的Ionic-v1中打开

7 年前

Satheesh K · Apache httpd basic auth绕过带有html/jsp页面的弹出窗口

7 年前