從彈出式覆蓋範圍中排除頁眉和頁腳

當頁面由於彈出式菜單（如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>

所以在這個〔實施例，頁眉和頁腳不應該被覆蓋點擊菜單鏈接時

來源

2012-10-03 Bram W.

這個z-index css屬性允許你設置不同的「圖層s「的頁面重疊。 jquery mobile中的固定標題的z-index爲1000. 通過將覆蓋的z-index設置爲低於1000的值，它將顯示在標題「下方」。

來源

2012-10-03 07:25:14 Romain

+1完美，正是我所需要的。謝謝！ –

從彈出式覆蓋範圍中排除頁眉和頁腳

回答

相關問題