In this article I will explain with an example, how to create and display Modal Popup Window using jQuery UI Dialog in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
The Controller consists of following Action method.
Action method for handling GET operation
Inside the Action method, simply the View is returned.
public class HomeController : Controller
    // GET: Home
    public ActionResult Index()
        return View();
The View consists of an INPUT Button and an HTML DIV for displaying Modal Popup.
jQuery Modal Popup plugin implementation
Inside the View, the following jQuery UI CSS file is inherited.
1. jquery-ui.css
And then, the following jQuery and jQuery UI JS scripts are inherited.
1. jquery.min.js
2. jquery-ui.js
Opening the jQuery Modal Popup
The INPUT Button has been assigned with jQuery click event handler.
Inside this event handler, the jQuery UI Dialog plugin has been applied to the HTML DIV and its title property is set.
Closing the jQuery Modal Popup
The Close button of Modal Popup is implemented using the Close event handler inside which the dialog function is called with parameter value passed as close.
    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <input type="button" id="btnModalPopup" value="Show Modal Popup" />
    <div id="modal_dialog" style="display: none">
        This is a Modal Background popup
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $("#btnModalPopup").on("click", function () {
                title: "jQuery Modal Dialog Popup",
                buttons: {
                    Close: function () {
                modal: true
Using jQuery Modal Popup in ASP.Net MVC