In this article I will explain how to create Modal Popup Window using jQuery UI Modal Dialog in ASP.Net and how to display the Modal Popup Window on Button Click
Simple Popup Window using jQuery UI Modal Dialog on Button Click
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=btnPopup]").live("click", function () {
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<div id="dialog" style="display: none">
This is a simple popup
</div>
<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />
Explanation:
The jQuery UI Modal Dialog requires a HTML DIV that acts as the content in other words body of the popup window. I have assigned a click jQuery event handler to the ASP.Net Button, where I have applied the jQuery UI Modal Dialog plugin to the dialog HTML DIV and also set its Title property.
![jQuery UI Dialog Popup Window in ASP.Net Example]()
Modal Popup Window using jQuery UI Modal Dialog on Button Click
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=btnModalPopup]").live("click", function () {
$("#modal_dialog").dialog({
title: "jQuery Modal Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
<div id="modal_dialog" style="display: none">
This is a Modal Background popup
</div>
<asp:Button ID="btnModalPopup" runat="server" Text="Show Modal Popup" />
Explanation:
Here everything is same as the above popup window except one thing that this popup is a Modal Popup which freezes the screen with a Modal Background.
![jQuery UI Dialog Popup Window in ASP.Net Example]()
Demo
Downloads
