Question

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

在控制器中：

[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

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

1 个答案: