Jquery dialog is not opening

@*@@model GridImplementation.Models.EmployeeDetailsModel*@
@model IEnumerable<GridImplementation.Models.EmployeeDetailsModel>
@Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<style type="text/css">
    .alignment {
        text-align: center;
    }

    .hAlignment {
        margin-left: 10px;
        float: left;
    }

    table, th, td {
        border: 1px solid black;
        font-size: 1.1em;
        text-align: center;
    }

    table {
        border-collapse: separate;
        width: 90%;
    }

    td {
        padding: 10px 0;
    }

    tr:nth-child(even) {
        background: #CCC;
    }

    tr:nth-child(odd) {
        background: #FFF;
    }

    table th {
        background-color: ButtonShadow;
    }
</style>
<div>
    <table id="tEmpDetails">
        <thead>
            <tr>
                <th>Employee Name</th>  
                <th>Employee Designation</th>  
                <th>Employee Department</th>  
                <th>Employee Salary</th>  
                <th>Actions</th>  
            </tr>
        </thead>
        <tbody>
            @foreach (var EmployeeDetails in Model)
            {
                <tr>
                    <td class="alignment" style="display:none;">@EmployeeDetails.EmpID    </td>  
                    <td class="alignment">@EmployeeDetails.EmpName    </td>  
                    <td class="alignment">@EmployeeDetails.EmpDesignation    </td>  
                    <td class="alignment">@EmployeeDetails.EmpDepartment    </td>  
                    <td class="alignment">@EmployeeDetails.EmpSalary    </td>  
                    <td class="alignment">
                        <input id="btnEdit" type="button" value="Edit" />
                        <input id="btnDelete" type="button" value="Delete" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {       
        $("#tEmpDetails").on('click', '#btnEdit', function () {
            var CurrentRow = $(this).closest('tr');
            var EmpID = CurrentRow.find("td:eq(0)").text();
            var EmpName = CurrentRow.find("td:eq(1)").text();
            var EmpDesignation = CurrentRow.find("td:eq(2)").text();
            var EmpDepartment = CurrentRow.find("td:eq(3)").text();
            var EmpSalary = CurrentRow.find("td:eq(4)").text();
            $("#EmpName").val(EmpName);
            $("#EmpDesignation").val(EmpDesignation);
            $("#EmpDepartment").val(EmpDepartment);
            $("#EmpSalary").val(EmpSalary);
            $("#openPopup").dialog('open');


        });
    });
    $(function () {
        $("#openPopup").dialog({
            modal: true,
            autoOpen: false,
            title: "Edit Employee Details",
            width: 500,
            height: 500,
            buttons: {
                close: function () {
                    $(this).dialog('close');
                }
            }
        });
    })

</script>

<div id="openPopUp" style="display:none;" align=center>
    <table>
        <tr>
            <td>Employee Name:</td>
            <td>@Html.TextBox("EmpName")    </td>
        </tr>
        <tr>
            <td>Employee Designation:</td>
            <td>@Html.TextBox("EmpDesignation")    </td>
        </tr>
        <tr>
            <td>Employee Department:</td>
            <td>@Html.TextBox("EmpDepartment")    </td>
        </tr>
        <tr>
            <td>Employee Salary:</td>
            <td>@Html.TextBox("EmpSalary")    </td>
        </tr>
    </table>
</div>