Javascript 创建呈现局部视图的弹出窗口

在过去的几天里，我一直在努力解决弹出窗口的问题。这里有一些信息。我对使用JavaScript非常陌生，但我渴望学习。首先（按右上角的“Inloggen”使其弹出）CSS没有问题。我得到这个工作使用和复制编辑代码中使用的网站，而不是网站

但无论如何，这里演示的站点是使用php创建的。但是我的老板决定改用MVC4.NET。这其实不是什么问题，只是它已经不起作用了。我不知道为什么

所以我决定重新开始，但我需要一些帮助

我希望实现的是有一个

，可以重复使用并呈现局部视图

为了触发它，我想要以下几行：

       <span class="popup_button white" data-popup="Some/view" data-height='200'>Inloggen</span>

Inloggen

这可能是其他标记，而不是span和Id，可以用来代替class来定义它是一个弹出式触发器。（当然，我们也欢迎所有其他解决方案）。我希望使用“数据弹出”属性指定触发时渲染哪个局部视图，使用“数据高度”属性指定弹出内容的高度

谁能告诉我如何达到这个目的？我知道可能有很多问题要问，但每一个建议都是受欢迎的。由于我对JavaScript缺乏经验，我更喜欢代码示例，但任何架构建议都会被愉快地接受

提前谢谢你们：D

$('#my-button').click(function () { 
    var BaseUrl = "/Popup/" + $('#my-button').data("popup"); 
    $.ajax({
        url: BaseUrl,
        type: "POST",
        data: { Id: $('.Id').val() }
        cache: false,
        async: true,
        success: function (result) {
            $(".content").html(result);
            //There are different ways to do the pop up.  you mentioned you had the popup working.  trigger it here
            $('#popup').fadeIn("slow"); 
            $('.fader').fadeIn("slow"); 
        }
    });
});

然后在你的控制器里

[HttpPost]
public PartialViewResult Action(int Id){
    //populate a model
    return PartialView("_PartialViewName", model);
}

---

如果您还有任何问题，请告诉我。

Multimension modal对集成ajax内容的支持。。。继续搜索。无需重新发明wheel@charlietfl我做了很多搜索，但是我找不到我想要的东西，或者我没有意识到它是我想要的东西。所以，如果你有任何建议，请帮忙。搜索开源插件可能会令人沮丧，而且会占用大量的时间。但是，如果您对javascript非常陌生，那么花时间是值得的。在jfiddle.net中创建一个到目前为止所拥有内容的演示，对于使用ajax回调控制器有很大帮助。请看我的答案。这将用partial填充您的div，您可以在其上运行覆盖。如果有，请告诉我questions@MattBodily谢谢你的回答，但老实说，我不知道如何处理这段代码以及它的作用。所以一些额外的解释会很有帮助的。谢谢，伙计，我很快就会尝试的。实际上，弹出窗口现在在.Content div中插入了一个iframe。所以我想我仍然需要这样做？

url:@（url.Action（“Action”、“Controller”）的任务是什么，

line？iFrame有其用途，但据我所知，通常应避免使用。在Url.Action中，用您的操作和控制器名称替换这些。这将对控制器执行异步调用，返回一个部分视图，在我的代码中，该视图将插入到一个div中，然后您可以在其中执行弹出操作。我从实际开始下面是bpopup的例子，这是我到目前为止得到的。但即使这在JSFIDLE上也有效，但在我的项目中不起作用。

这些是我的重点。您的JSfiddle给出了一个404。我的代码可以为您工作。您应该查看jquery对话框或overlay。我们使用overlay进行外观和实现在我的代码中，设置div的html，然后只做overlay.load（）