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

问题描述

jQuery Mobile弹出窗口的尺寸仅限于具有左侧和右侧的边距分别为15px和30px顶部和底部.如果内容对于这些约束而言太大，则弹出窗口会变长(而不是变宽)，因此必须滚动整个页面才能查看弹出内容.

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.

如何允许弹出内容在弹出窗口内垂直滚动?

推荐答案

您应使用:

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

这是一个工作示例: http://jsfiddle.net/Gajotres/mmRnq/

最后的笔记

如果您想了解有关如何自定义jQuery Mobile页面和窗口小部件的更多信息，请查看此

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屋！