html5 - Launching popup on left overlay panel in jquery mobile -

html5 - Launching popup on left overlay panel in jquery mobile -

i'm working on mobile app. have panel , popup, want popup launch on left overlay panel when clicked on signout . i'm not gettin i'm going worng. please suggest. in advance. below code.

<div data-role="page" data-theme="a" id="demo-page" class="my-page"> <div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-position-fixed="true" > <div data-role="header" data-theme="a" data-position="absolute" > <h1>settin</h1> </div> <div data-role="content"> <div class="content-primary"> <ul data-role="listview" data-icon="false" data-theme="a" data-dividertheme="a" > <li><a href="#signout" rel="external"><img src="images/signout.png" alt="documents" class="ui-li-icon">sign out</a></li> </ul> </div> <!--/content-primary --> </div> </div> <div data-role="popup" id="signout" data-theme="a" class="ui-corner-all"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a> <form> <div style="padding:10px 20px;"> <h3 style="color:#29a797;"> window</h3> <label for="un" class="ui-hidden-accessible">username:</label> <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a"> <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">sign in</button> </div> </form> </div> <div data-role="header" data-position="fixed" data-theme="b"> <h1>panel</h1> <a href="#mypanel" data-rel="popup" data-transition="slideup" data-icon="bars" data-iconpos="notext" >bars</a> </div> </div>

you not referring popup , using wrong rel attribute.

<a href="#signout" rel="external">

you should alter to

<a href="#signout" data-rel="popup" data-position-to="origin">

data-rel="popup" means target hash popup , data-position-to="origin" position popup on top of referral button.

demo

html5 jquery-mobile