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

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

本文介绍了如何检查jQM弹出窗口是否适合用户的视口?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,我设法将滚动条添加到具有以下内容的大型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.

更新:

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

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

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

08-23 01:21