从弹出式覆盖范围中排除页眉和页脚

当页面由于弹出式菜单（如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完美，正是我所需要的。谢谢！ –

从弹出式覆盖范围中排除页眉和页脚

回答

相关问题