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.
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
{
// GET: Home
public ActionResult 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 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>
<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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
![Using jQuery Modal Popup in ASP.Net MVC]()
Demo
Downloads
