1

在过去的几天里,我一直在为弹出窗口而苦苦挣扎。这里有一点信息。我对使用 JavaScript 很陌生,但我很想学习。首先,这是我想做的一个例子。(按右上角的'Inloggen'使其弹出)CSS没问题。我使用bPopUp和复制编辑站点中使用的代码而不是示例来完成这项工作。

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

所以我决定重新开始,但我需要一点帮助。

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

要触发它,我想要以下内容:

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

这可能是其他标签而不是 span,并且可以使用 Id 代替 class 来定义它是一个弹出触发器。(当然也欢迎任何其他解决方案)。我想使用 data-popup 属性来指定触发时要渲染的部分视图,并使用 data-height 属性来指定弹出内容的高度。

任何人都可以给我有关如何实现这一目标的提示吗?我知道要问的可能很多,但欢迎提出每一个建议。由于我对 JavaScript 缺乏经验,我更喜欢代码示例,但任何架构建议都将被愉快地接受。

提前谢谢你们:D

4

1 回答 1

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

如果您还有其他问题,请告诉我。

于 2013-11-11T15:21:07.257 回答