在JQuery mobile中显示弹出窗口

我正在使用JQuery mobile，我试图显示一个弹出窗口，但弹出窗口根本不显示。到目前为止，我一直在努力做到以下几点：

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

document.addEventListener（“菜单按钮”，函数（）{
变量模板=$（“”
+“
”
+“
选项
”
+“
设置
”
+“
刷新
”
+“
帮助
”
+“
关于
”
+“
退出应用程序”
+“
”；
template.appendTo（$.mobile.pageContainer）；
template.popup（）；
template.popup（'open'）；
}，假）；

弹出div应该附加到页面div中，如果将其添加到正文或页面容器中，它将不起作用。此外，您需要在打开它之前创建它

---

你在试什么设备？并非所有设备都支持菜单按钮事件。

// 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');