如何在Javascript PhoneGap應用程序中居中對齊彈出窗口

Question

當我從另一個Popup調用Popup時，第二個Popup不會顯示在頁面中間。 例如，在下面的代碼中，如果單擊“書簽”，則會在頁面的左上角區域打開下一個彈出窗口，該區域看起來有些奇怪。

<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-->

有人可以告訴我如何確保我的彈出窗口，尤其是第二個彈出窗口在頁面中央打開？

這是JSFiddle：

Answer 1

您需要添加屬性data-position-to =“window” ，請閱讀鏈接JQM POPUP

找到有效的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');
});