創建一個呈現部分視圖的彈出窗口

Question

最近幾天，我一直在努力尋找彈出窗口。 這是一些信息。 我對使用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代替類來定義它是一個彈出觸發器。 （當然，也歡迎使用其他所有解決方案）。 我想使用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);
}

如果您還有其他問題，請告訴我。