Question

由于弹出菜单（如http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html所示），当页面有覆盖时，我希望我的页眉和页脚可以访问。简而言之，只有属性为“data-role = content”的div应该应用叠加层。如果可能，这应该使用最少的额外CSS和/或JavaScript来实现。我查看了整个jQuery Mobile文档，但没有找到任何关于我的问题的参考。

一些代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Context Menu</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
    </head>

    <body>

        <div data-role="page">

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

            <div data-role="content">
                <a href="#popupMenu" data-rel="popup" data-role="button">Menu</a>

                <div data-role="popup" id="popupMenu" data-overlay-theme="b">
                    <ul data-role="listview" data-inset="true" style="width: 200px">
                        <li><a href="#">Add</a></li>
                        <li><a href="#">Edit</a></li>
                        <li><a href="#">Manage</a></li>
                        <li><a href="#">Delete</a></li>
                    </ul>
                </div>
            </div>

            <div data-role="footer" data-position="fixed">
                <h1>Footer</h1>
            </div>

        </div>

    </body>
</html>

因此，在此示例中，单击“菜单”链接时不应覆盖页眉和页脚。

Answer 1

z-index css属性允许您设置页面的不同“图层”的叠加方式。 jquery mobile中的固定标头的z-index为1000。通过将叠加层的z-index设置为低于1000的值，它将显示在标题“下方”。

从弹出覆盖中排除页眉和页脚

1 个答案: