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; }