在JQuery移動設備中顯示彈出窗口

Question

我正在使用JQuery移動設備，並試圖顯示一個彈出窗口，但彈出窗口不顯示。以下是我試過到目前爲止做：

document.addEventListener("menubutton", function(){ 
    var template = $("<div data-role='popup' id='menu-option' " 
     + "data-overlay-theme='a'>" 
     + "<ul data-role='listview' data-inset='true' " 
     + "style='min-width:210px;' data-theme='d'>" 
     + "<li data-role='divider' data-theme='e'>Options</li>" 
     + "<li><a>Setting</a></li>" 
     + "<li><a>Refresh</a></li>" 
     + "<li><a>Help</a></li>" 
     + "<li><a>about</a></li>" 
     + "<li><a id='exit-app'>Exit App</a></li>" 
     + "</ul> </div>"); 


    template.appendTo($.mobile.pageContainer);      
    template.popup(); 
    template.popup('open'); 

    }, false); 

Answer 1

彈出DIV應該附加到頁面的div，它不會，如果你把它添加到身體或pageContainer工作。另外，你需要在創建它之前打開它。

// append it to active page or a specifiC#page 
template.appendTo($.mobile.activePage); 

// create it and then open it 
$("[data-role=popup]").popup().trigger("create").popup('open'); 

Demo