cordova - How to Centre Align Popup in Javascript PhoneGap App -
when call popup popup second popup doesn't show in middle of page. example in code below if click on "bookmark" next popup opens in top left region of page looks bit odd.
<button onclick="$('#bookmarkspopup').popup('open');">popup</button> <div data-role="popup" id="bookmarkspopup"> <ol data-theme="d" data-role=listview data-inset=false > <li><a data-icon="home" data-rel="popup" href="#bmpopup">bookmark</a></li> <li><a data-icon="home" onclick="closepopup();">close</a></li> </ol> </div><!-- /popup bookmarkpopup--> <div data-role="popup" id="bmpopup"> <ol data-theme="d" data-role=listview data-inset=false > <li><a data-icon="home" onclick="savebookmarkpage();">bookmark page</a></li> <li><a data-icon="home" onclick="savebookmark(0);">bookmark audio</a></li> <li><a data-icon="home" onclick="savebookmark(1);">bookmark audio position</a></li> <li><a data-icon="home" onclick="displaybookmarks();">manage bookmarks</a></li> <li><a data-icon="home" onclick="closepopup();">close</a></li> </ol> </div><!-- /popup bookmarkpopup-->
can please tell me how ensure popups, second one, opens in centre of page?
you need add property data-position-to="window", read on link jqm popup
find working demo
<button id='pid'>popup</button> <div data-role="popup" id="bookmarkspopup" data-position-to="window"> <ol data-theme="d" data-role=listview data-inset=false> <li><a data-icon="home" data-rel="popup" href="#bmpopup">bookmark</a> </li> <li><a data-icon="home" onclick="closepopup();">close</a> </li> </ol> </div> <div data-role="popup" id="bmpopup" data-position-to="window" > <ol data-theme="d" data-role=listview data-inset=false> <li><a data-icon="home" onclick="savebookmarkpage();">bookmark page</a> </li> <li><a data-icon="home" onclick="savebookmark(0);">bookmark audio</a> </li> <li><a data-icon="home" onclick="savebookmark(1);">bookmark audio position</a> </li> <li><a data-icon="home" onclick="displaybookmarks();">manage bookmarks</a> </li> <li><a data-icon="home" onclick="closepopup();">close</a> </li> </ol> </div> $('#pid').click(function () { $('#bookmarkspopup').popup('open'); });
Comments
Post a Comment