mui popover 自定义、弹出位置、显示、隐藏

1. 1.页面顶部导航栏、底部工具栏固定位置 
2. <header class="mui-bar mui-bar-nav"> 
3.     <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 
4.     <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a> 
5.     <h1 class="mui-title">右上角弹出菜单</h1> 
6. </header> 
7. <footer class="mui-bar mui-bar-footer"> 
8.     <a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">右下角弹出菜单</a> 
9. </footer> 
10. <!--右上角弹出菜单--> 
11. <div id="topPopover" class="mui-popover"> 
12.     <div class="mui-popover-arrow"></div> 
13.     <div class="mui-scroll-wrapper"> 
14.         <div class="mui-scroll"> 
15.             <ul class="mui-table-view"> 
16.                 <li class="mui-table-view-cell"><a href="#">Item1</a></li> 
17.                 <li class="mui-table-view-cell"><a href="#">Item2</a></li> 
18.                 <li class="mui-table-view-cell"><a href="#">Item3</a></li> 
19.                 <li class="mui-table-view-cell"><a href="#">Item4</a></li> 
20.                 <li class="mui-table-view-cell"><a href="#">Item5</a></li> 
21.             </ul> 
22.         </div> 
23.     </div> 
24. </div> 
25. <!--右下角弹出菜单--> 
26. <div id="bottomPopover" class="mui-popover mui-popover-bottom"> 
27.     <div class="mui-popover-arrow"></div> 
28.     <div class="mui-scroll-wrapper"> 
29.         <div class="mui-scroll"> 
30.             <ul class="mui-table-view"> 
31.                 <li class="mui-table-view-cell"><a href="#">Item1</a></li> 
32.                 <li class="mui-table-view-cell"><a href="#">Item2</a></li> 
33.                 <li class="mui-table-view-cell"><a href="#">Item3</a></li> 
34.                 <li class="mui-table-view-cell"><a href="#">Item4</a></li> 
35.       &