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

cssプロパティを使用すると、ページのz-indexさまざまな「レイヤー」を重ね合わせる方法を設定できます。jquery mobileの固定ヘッダーのaz-indexは1000です。オーバーレイのを1000未満の値に設定するz-indexと、ヘッダーの「下」に表示されます。

于 2012-10-03T07:25:14.910 に答える