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

jQuery Mobile Dialog页面 - 固定位置标题

1 个答案: