In this article I will explain with an example, how to create Modal Popup windows using
jQuery UI Dialog in ASP.Net Core Razor Pages.
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.Pages.IndexModel
@{
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
Downloads
