jQuery Mobile的 Popup小部件
具有多种操作方式。可以通过按钮调用或以编程方式打开它。结构很简单，但是请注意，只有页面div应该是弹出窗口的直接父级。
<div data-role="page"> <div data-role="popup" id="foo"> <!-- content --> </div></div>
要通过按钮或锚点将其静态打开，请执行以下操作：
<a href="#foo" data-rel="popup" data-transition="pop">Popup</a>
以编程方式打开它：
$("#foo").popup("open");另外，您可以将特殊事件用于任何您想要的目的，例如
popupafteropen和
popupafterclose。
以下是动态创建的弹出窗口的示例。
// close buttonvar closeBtn = $('<a href="#" data-rel="back" >Close</a>');// text you get from Ajaxvar content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";// Popup body - set width is optional - append button and Ajax msgvar popup = $("<div/>", { "data-role": "popup"}).css({ width: $(window).width() / 1.5 + "px", padding: 5 + "px"}).append(closeBtn).append(content);// Append it to active page$.mobile.pageContainer.pagecontainer("getActivePage").append(popup);// Create it and add listener to delete it once it's closed// open it$("[data-role=popup]").on("popupafterclose", function () { $(this).remove();}).on("popupafteropen", function () { $(this).popup("reposition", { "positionTo": "window" });}).popup({ dismissible: false, history: false, theme: "b", overlayTheme: "b", transition: "pop"}).popup("open");演示版
