i have created a pop up menu in my app.The problem is when i click on the button 1st time it shows the pop-menu and when i click outside the popup menu menu should be hidden but its not hiding. and when i click on another button the pop menu hides but doesnot open again if i click on the menu button again. Here is the code written for popup menu:
<body>
<div data-role="page" id="demo_page" data-theme="d">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>FOOOTER DEMO</h1>
</div>
<div data-role="content">
<h1>Footerdemo</h1>
<div data-role="popup" id="popupMenu" data-theme="d">
<ul data-role="listview" data-inset="true" data-theme="d"
data-divider-theme="d">
<li><a href="#">Adduser</a></li>
<li><a href="#">AddCompany</a></li>
</ul>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" height="50">
<td><a href="#popupMenu" class="btn_add" data-rel="popup"
data-role="button" data-inline="true" data-icon="addbtn"
data-transition="slideup"></a></td>
<td><a href="footerdesign.html" class="btn_edit"
data-role="button" data-icon="editbtn" data-inline="true"></a></td>
<td><a href="#" class="btn_delete" data-role="button"
data-icon="deletebtn" data-inline="true" onclick="deleteUser()"></a>
</td>
<td><a href="footerdesign.html" class="btn_menu"
data-role="button" data-icon="menubtn" data-inline="true"></a></td>
</tr>
</table>
</div>
</div>
thanks in advance.