Question

标题中有一个菜单按钮。该页面由ajax请求填充。单击菜单按钮，它会在屏幕上显示一秒钟，然后被推回到列表视图后面。我无法在任何地方找到解决方案。

<!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>

同样的事情发生在另一个页面上，弹出窗口被标题略微切断。我不确定我是否需要向您展示JS文件...它只是一个ajax调用（'pageinit'...）并在最后刷新列表视图。我在这里做错了什么？

Answer 1

尝试在菜单中添加z-index。

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

标题中的弹出菜单被推回到页面内容后面

1 个答案: