json - 使用 Ajax JSON 的动态 JQuery 移动弹出窗口

Question

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

在 Controller 中:

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

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

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

Answer 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