Question

我正在使用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);

Answer 1

Popup div应该附加到页面div，如果将它添加到body或 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

在JQuery mobile中显示弹出窗口

1 个答案: