Question

过去几天我一直在努力打击弹出窗口。这里有一些信息。我是使用JavaScript的新手，但我很想学习。首先here is an example of what I want to make.（按右上角的'Inloggen'使其弹出）CSS没问题。我使用bPopUp并复制编辑网站中使用的代码而不是examples。

但无论如何，这里演示的网站是使用php制作的。但我的老板决定改用MVC 4 .NET。这不是一个真正的问题，除了它不再起作用的事实。我不知道为什么。

所以我决定重新开始，但我可以稍微帮忙。

我希望实现的是让一个<div>可以重复使用并呈现局部视图。

要触发它，我想要的是：

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

这可能是其他标签而不是span，可以使用Id而不是类来定义它是弹出触发器。（当然也欢迎任何其他解决方案）。我想使用data-popup属性来指定触发时要渲染的部分视图，以及data-height属性来指定弹出窗口内容的高度。

任何人都可以给我一些如何达到此目的的提示吗？我知道这可能有很多问题，但欢迎提出每一个建议。由于我缺乏JavaScript经验，我更喜欢代码示例，但任何架构建议都会很乐意接受。

提前谢谢你们：D

Answer 1

$('#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);
}

如果您还有其他问题，请与我们联系。

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

1 个答案: