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

Jquery mobile 从弹出覆盖中排除页眉和页脚,jquery-mobile,Jquery Mobile,我希望我的页眉和页脚可以在页面由于弹出菜单(如上所示)而出现覆盖时访问。 因此,简而言之,只有属性为“data role=content”的div应该应用覆盖。 如果可能的话,应该使用最少的额外CSS和/或JavaScript来实现这一点 一些代码: <!DOCTYPE html> <html> <head> <title>Context Menu</title> <meta name="v

我希望我的页眉和页脚可以在页面由于弹出菜单(如上所示)而出现覆盖时访问。 因此,简而言之,只有属性为“data role=content”的div应该应用覆盖。 如果可能的话,应该使用最少的额外CSS和/或JavaScript来实现这一点

一些代码:

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

上下文菜单
标题
页脚

因此,在此exmaple中,单击菜单链接时,页眉和页脚不应重叠。

css属性允许您设置页面不同“层”的重叠方式。
z-index
css属性允许您设置页面不同“层”的重叠方式。jquery mobile中的固定页眉具有1000的
z-index
。 通过将覆盖的
z-index
设置为1000以下的值,它将显示在标题下