Cannot show Popup with jQuery Mobile 1.3.1

问题

I'm trying to pop up a very simple "are you sure?" popup in jQuery Mobile. But if I use the data-rel="popup" on the button, nothing happens. If I remove the data-rel it opens - but as a full window. The logic works well, but still, I'd like to see a popup.

Here's the code (simplified - I removed the other pages, the header, html etc. - the app works well other than this issue, so no need to debug those). The 2 elements to look at are the button "clearHistory" and the popup itself "history":

<!-- history page -->
<div data-role="page" id="history">
    <div data-role="header" data-position="fixed">
        <a href="#" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
        <h1>History</h1>
        <a href="#deletePopup" data-role="button" data-rel="popup" id="clearHistory" data-icon="delete" data-iconpos="notext" data-theme="d">Delete</a>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
        <h4 id="historyEmpty">History is empty</h4>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
    </div><!-- /footer -->       
</div>
<!-- end history page -->

<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
    <div data-role="header" data-theme="a">
        <h1>Delete History?</h1>
    </div>
    <div data-role="content" data-theme="d">
        <h3>Delete all items in history?</h3>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="d" id="deleteHistory">Delete</a>
    </div>
</div>
<!-- delete history popup -->

Any idea what am I missing here?

回答1:

Place popup inside <div data-role=page> and that div should be the direct parent of popup div. I placed before <div data-role=content> in the below demo.

Demo

Dialog should be placed outside <div data-role=page> because they are treated as a page.

来源：https://stackoverflow.com/questions/17386072/cannot-show-popup-with-jquery-mobile-1-3-1