How to Centre Align Popup in Javascript PhoneGap App

Question

When I call a Popup from another Popup the second Popup doesn't show in the middle of the page. For example in the Code below if you Click on "Bookmark" the next popup opens in the top left region of the page which looks a 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 this Page</a></li>
            <li><a data-icon="home" onclick="SaveBookmark(0);">Bookmark this 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 someone please tell me how to ensure that my Popups, especially the second one, opens in the centre of the page?

Here is the JSFiddle:

Answer 1

You need to add property data-position-to="window" , Read on the link JQM POPUP

Find the 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 this Page</a>
        </li>
        <li><a data-icon="home" onclick="SaveBookmark(0);">Bookmark this 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');
});