jQuery 移动对话页面 - 固定位置 Header

Question

我可以修复 headers 以在其他页面上正常工作，但是当我尝试在具有 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;
}

Here is a DEMO

jQuery 移动对话页面 - 固定位置 Header

jQuery Mobile Dialog Page - Fixed Position Header

dialog

fixed

scrollable

jquery-mobile