In this article I will explain with an example, how to create Modal Popup windows using jQuery UI Dialog in ASP.Net Core (.Net Core 8) Razor Pages.
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Razor PageModel (Code-Behind)

The PageModel consists of following Handler method.

Handler method for handling GET operation

This Handler method left empty as it is not required.
public class IndexModel : PageModel
{
    public void OnGet()
    {
            
    }
}
 
 

Razor Page (HTML)

The HTML of Razor Page consists of an INPUT Button and an HTML DIV for displaying Modal Popup.

jQuery Modal Popup plugin implementation

Inside the HTML Markup, 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.
@page
@model jQuery_Modal_Core_Razor.IndexModel
@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers
 
@{
    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

ASP.Net Core Razor Pages: jQuery Modal Popup example
 
 

Demo

View Demo
 
 

Downloads

Download Code