팝업 오버레이에서 머리글과 바닥 글 제외

팝업 메뉴로 인해 페이지에 오버레이가있는 경우 머리글과 바닥 글에 액세스 할 수 있기를 원합니다 (http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html 참조). 간단히 말해서 'data-role = content'속성의 div 만 적용해야합니다. 가능하면 여분의 CSS 및/또는 JavaScript를 사용하여 가능해야합니다. 전체 jQuery를 모바일 문서,하지만 내 문제에 대한 참조를 발견하지 않았습니다팝업 오버레이에서 머리글과 바닥 글 제외

일부 코드 :., 머리글과 바닥 글이 오버레이해서는 안 메뉴 링크를 클릭이 exmaple에 따라서

<!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 모바일의 고정 헤더는 z-index의 1000입니다. 오버레이의 z-index을 1000 미만의 값으로 설정하면 헤더 아래에 표시됩니다.

출처

2012-10-03 07:25:14 Romain

+1 완벽하고 필요한 것. 고맙습니다! –

팝업 오버레이에서 머리글과 바닥 글 제외

답변

관련 문제