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

【问题标题】：Exclude header and footer from popup overlay从弹出覆盖中排除页眉和页脚
【发布时间】：2012-09-24 01:54:57
【问题描述】：

我希望当页面由于弹出菜单而有覆盖时可以访问我的页眉和页脚（如 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>

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

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

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

【讨论】：