無法顯示彈出與jQuery Mobile 1.3.1

Question

我試圖彈出一個非常簡單的「你確定嗎？」在jQuery Mobile中彈出。但是如果我在按鈕上使用data-rel="popup"，則什麼也不會發生。如果我刪除data-rel它會打開 - 但是作爲一個完整的窗口。邏輯運作良好，但仍然，我想看到一個彈出窗口。

下面是代碼（簡化 - 我刪除了其他頁面，頭文件，html等 - 除了這個問題，應用程序運行良好，因此不需要調試這些）。在2個元素來看看是按鈕「clearHistory」，並在彈出的本身「歷史」：

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

任何想法，我缺少什麼嗎？

Answer 1

在<div data-role=page>裏面放置彈出窗口，該div應該是popup div的直接父級。我在下面的演示中放置在<div data-role=content>之前。

Demo

對話框應放在外面<div data-role=page>，因爲它們是作爲一個頁面處理。