In this article, I describe how to open popup in mvc usingjquery. Here I am using jquery-ui.js and jquery-ui.css. Here I demonstrate with adding sales items. please referthese below link to add js and css file .
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css
In Demo.cshtml
<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/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
@using (Html.BeginForm())
{
<input type="button" id="btnShow" value="ShowPopup" />
<div id="dialog" style="display: none" align="center">
<fieldset>
<legend>Add Item</legend>
<table>
<tr>
<td>
<label>ItemName :</label>
</td>
<td>
@Html.TextBox("ItemName")
</td>
</tr>
<tr>
<td>
<label>Qty :</label>
</td>
<td>
@Html.TextBox("Qty")
</td>
</tr>
<tr>
<td>
<label>Sales Price :</label>
</td>
<td>
@Html.TextBox("UnitPrice")
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Save" onclick="Add()" />
<input type="button" value="Cancel" onclick="Close()" />
<br />
<br />
</td>
</tr>
</table>
</fieldset>
</div>
}