jQuery Mobile 对话框页面 - 固定位置标题

Question

我可以让固定标题在其他页面上正常工作，但是当我尝试在具有data-dialog="true" 的页面中进行此操作时，它似乎不起作用。这是对话框的限制吗？

请注意，我使用以下 CSS 来允许高滚动对话框：

.ui-dialog-contain {
    max-height: 500px;
    overflow:hidden;
    overflow-y: scroll;
}

我的代码如下：

<div data-role="page" data-dialog="true" id="dialog_page" >

    <div data-role="header">
        <h1>Header</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <!-- lots of content removed -->
    </div><!-- /content -->

</div>

Answer 1

您可以设置内容 div 的最大高度和滚动而不是整个对话框：

.ui-dialog-contain .ui-content{
    max-height: 450px;
    overflow:hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

这是一个DEMO