Как в ASP.NET MVC сделать всплывающую форму?

// при клике на оверлей либо на кнопку убираем класс .shown со всех модальных окон и оверлея 
$('.overlay, .modal-close').click(function() { 
  $('.modal, .overlay').removeClass('shown'); 
}); 
 
// при клике на кнопку открытия модального окна получаем его id и докидываем класс .shown к нему и оверлею  
$('.open-modal').click(function() { 
  let modalId = $(this).data('modal-id'); 
  $('.overlay, #' + modalId).addClass('shown'); 
});

.modal { 
  width: 300px; 
  height: 200px; 
  border-radius: 5px; 
  border: 1px black solid; 
  background: #fff; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  margin-top: -100px; 
  margin-left: -150px; 
  display: none; 
  z-index: 5; 
  padding: 20px 10px; 
} 
 
.modal .modal-close { 
  width: 21px; 
  height: 21px; 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  cursor: pointer; 
  display: block; 
  stroke: black; 
} 
 
.overlay { 
  z-index: 3; 
  position: fixed; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background-color: black; 
  opacity: 0.6; 
  display: none; 
} 
 
.modal.shown, 
.overlay.shown { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-modal-id="modal-1" class="open-modal">Open modal #1</button> 
<button data-modal-id="modal-2" class="open-modal">Open modal #2</button> 
 
<div id="modal-1" class="modal"> 
  <span class="modal-close"> 
  <svg viewbox="0 0 40 40"> 
    <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /> 
  </svg> 
  </span> 
  <div> 
    Modal 1 
  </div> 
</div> 
<div id="modal-2" class="modal"> 
  <span class="modal-close"> 
  <svg viewbox="0 0 40 40"> 
    <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /> 
  </svg> 
  </span> 
  <div> 
    Modal 2 
  </div> 
</div> 
 
<div class="overlay"></div>

$('.overlay, .modal-close').click(function() { 
  $('.modal, .overlay').removeClass('shown'); 
}); 
 
$('.load-modal-frame').click(function() { 
  let url = $(this).attr('href'); 
  $('.modal iframe').attr('src', url); 
  $('.overlay, .modal').addClass('shown'); 
   
  return false; 
});

.modal { 
  top: 20px; 
  left: 20px; 
  right: 20px; 
  bottom: 20px; 
  border-radius: 5px; 
  border: 1px black solid; 
  background: #fff; 
  position: fixed; 
  display: none; 
  z-index: 5; 
  padding-top: 40px; 
  overflow: hidden; 
} 
 
.modal .modal-close { 
  width: 21px; 
  height: 21px; 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  cursor: pointer; 
  display: block; 
  stroke: black; 
} 
 
.modal iframe { 
  width: 100%; 
  height: 100%; 
  border-width: 0; 
} 
 
.overlay { 
  z-index: 3; 
  position: fixed; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background-color: black; 
  opacity: 0.6; 
  display: none; 
} 
 
.modal.shown, 
.overlay.shown { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="https://ru.stackoverflow.com/" class="load-modal-frame">Open StackOverflow</a> 
<br> 
<a href="https://ru.stackoverflow.com/q/690722/235242/" class="load-modal-frame">Open my question</a> 
 
<div class="modal"> 
  <span class="modal-close"> 
  <svg viewbox="0 0 40 40"> 
    <path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /> 
  </svg> 
  </span> 
  <iframe></iframe> 
</div> 
 
<div class="overlay"></div>