Создайте всплывающее окно, которое отображает частичный вид

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> 

Это могут быть и другие теги вместо диапазона и Id может быть использован вместо класса, чтобы определить это всплывающее окно запуска. (Конечно, любые другие решения приветствуются, конечно). Я хотел бы, чтобы атрибут pop-pop-данных указывал, какое частичное представление для рендеринга при запуске и атрибут высоты данных задает высоту содержимого всплывающего окна.

Может ли кто-нибудь дать мне советы о том, как достичь этого? Я знаю, что можно много спросить, но каждое предложение приветствуется. Из-за моей неопытности с 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); 
} 

Позвольте мне знать, если у вас есть какие-либо другие вопросы.