使用 Ajax JSON 的动态 JQuery 移动弹出窗口答案

【问题标题】：Dynamic JQuery mobile popup with Ajax JSON使用 Ajax JSON 的动态 JQuery 移动弹出窗口
【发布时间】：2013-12-28 11:14:14
【问题描述】：

我有一个 MVC 4 移动网站。第一个页面有一个弹出窗口，需要显示通过 AJAX 请求来自控制器的大量文本。

在控制器中：

[HttpPost]
public ActionResult GetLongText()
{
    return Json(OurState.GetLongText);
}

这只会返回 jsfiddle 上的错误函数中的内容： http://jsfiddle.net/TyhnV/28/

第一次单击按钮会将弹出窗口显示在一边，第二次单击会将其正确地居中放置在窗口中。我需要知道如何动态创建弹出窗口，以便第一次单击按钮可以获得弹出窗口的正确窗口位置，而不是因为放置在其中的文本大小而放错位置。

【问题讨论】：

jsfiddle.net/Palestinian/TyhnV/41 基于您的演示

标签： json jquery jquery-mobile dynamic

【解决方案1】：

这里有一个关于如何动态创建弹出窗口的基本教程。

// close button
var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();

// text you get from Ajax
var 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 msg
var popup = $("<div/>", {
    "data-role": "popup"
}).css({
    "width": "150px"
}).append(closeBtn).append(content);

// Append it to active page
$(".ui-page-active").append(popup);

// Create it and add listener to delete it once it's closed
// add listener to change its' position if you want
$("[data-role=popup]").on("popupafterclose", function () {
    $(this).remove();
}).on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window"
        /* or set custom position */
        x: 150,
        y: 200
    });
// enhance popup and open it
}).popup().popup("open");

您不需要使用.trigger("create")，因为每一个元素都在前面得到了增强。还有其他高级选项来操作弹出窗口小部件。

$(".selector").popup({
    "theme" : "a",
    "overlayTheme" : "e",
    "history" : false,
    "dismissible" : false,
    "transition" : "fade"
});

Demo

【讨论】：