jQuery Mobile 弹出内容高度超过窗口高度 [英] jQuery Mobile popup content height exceeds window height

问题描述

结语

如果您想了解有关如何自定义 jQuery Mobile 页面和小部件的更多信息，请查看此 文章.它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的.

The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.

I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.

It is possible to limit the size of the popup thusly:

$('#popup').on({
  popupbeforeposition: function() {
    var maxHeight = $(window).height() - 30
    $('#popup').css('max-height', maxHeight + 'px')
  }
})

...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.

How do I allow the popup content to scroll vertically within the popup?

解决方案

You should use:

$('#popup').css('overflow-y', 'scroll');    

Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/

Final notes

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

这篇关于jQuery Mobile 弹出内容高度超过窗口高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！