Question

我的jQuery Mobile Page上有一个面板，如下所示：

这个媒体查询：

当用户访问桌面上的页面时，我使用它来减小页面的大小。无论如何，当我使用媒体查询并点击＆＃34;按钮＆＃34;在面板内部，面板关闭，就像我在面板外按压... 如何以正确的方式使用媒体查询和jquery移动面板？

相关代码：

<div data-role='panel' id='panel' data-display='overlay'>
    <ul data-role='listview'>
        <li>
            <a href='https://printsrv2.rz.hs-offenburg.de/index.php' data-rel='external' data-role='button' data-icon='arrow-r' data-inline='true' data-ajax='false' target='_blank'>Druckaufträge</a>
        </li>
        <li>
            <a href='#uploadPage' data-rel='close' data-role='button' data-icon='delete' data-inline='true'>Schließen</a>
        </li>
    </ul>  
</div>

我按要求制作了一个jsfiddle，你需要将结果视图扩展到最大值（你的屏幕必须足够大）才能看到问题

Answer 1

快速解决方案是使用z-index使面板消除图层显示在面板下方。默认情况下，面板的z-index为1001，dismiss div为1002.在媒体查询中，您可以将dismiss div z-index设置为999：

@media only screen and (min-width: 30em) {
        .ui-page {
                width: 30em !important;
                margin: 0 auto !important;
                position: relative !important;
                border: 1px solid lightgrey !important;
                border-radius: 15px;
                padding: 10px;
        }

        .ui-panel-dismiss {
                z-index: 999;    
        }
}

更新了 FIDDLE

注意：如果您想要更加彻底，可以在面板打开时调整dismiss div的大小和位置。

jQuery Mobile Panel＆amp;媒体查询

1 个答案: