2

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

一些代码：

<!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>

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

4

1 回答 1

2

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

于 2012-10-03T07:25:14.910 回答