jquery - popup menu in header gets pushed back behind page content -


i have menu button in header. page gets populated ajax request. clicking on menu button, appears second on screen , gets pushed behind listview. coudldn't find solution anywhere.

<!doctype html> <html>   <head>     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">     <script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>     <link rel="stylesheet" href="./style/jquery.mobile-1.3.1.min.css" />     <script src="./js/jquery-2.0.0.min.js"></script>     <script src="./js/jquery.mobile-1.3.1.min.js"></script>   </head>   <body>     <div data-role="page" id="home">       <div data-theme="b" data-role="header">         <a data-inline="true" data-transition="pop" data-rel="popup" href="#popupmenu" data-icon="gear" data-iconpos="notext" class="ui-btn-right"></a>     </div>    <!--menu-->      <div data-role="popup" id="popupmenu" data-theme="d">        <ul data-role="listview" data-inset="true" style="min-width:200px;" data-theme="d">          <li data-icon="false"><a href="#">share</a></li>          <li data-icon="false"><a href="mailto:" data-inline="true" data-transition="pop">contact</a></li>          <li data-icon="false"><a href="#">Оцени Нас</a></li>        </ul>      </div>    <!--menu--> <div data-role="content">   <ul>     //dynamically populated data here   </u> </div> <script src="js/getmainnews.js"></script> </div> </body> </html> 

the same thing happens on page popup gets cut off little header. i'm not sure if need show js file...it's ajax call on('pageinit'...) , refreshes listviews @ end. doing wrong here?

try adding z-index menu.

 element {    position: relative;    z-index: 9999;   } 

Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -