In this article I will explain with an example, how to create and display Modal Popup Window using jQuery UI Dialog in ASP.Net Core MVC.
Note: For beginners in ASP.Net Core MVC, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.
 
 
Controller
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
{
    public IActionResult Index()
    {
        return View();
    }
}
 
 
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 CSS file is inherited.
1. jquery-ui.css
And then, the following jQuery JS files 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>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <input type="button" id="btnModalPopup" value="Show Modal Popup" />
    <div id="modal_dialog" style="display: none">
        This is a Modal Background popup
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $("#btnModalPopup").on("click", function () {
            $("#modal_dialog").dialog({
                title: "jQuery Modal Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Implement jQuery Modal Popup in ASP.Net Core
 
 
Demo
 
 
Downloads
Download Code