无法关闭模式弹出窗口

Question

I have View opening in popup as shown below.

 $(function () {
        $('#lnkPremiumAllocationPlan').click(function () {
            var selPolicyId = $('#sltPolicyName option:selected').val();
            $.ajax({              

                url: '@Url.Action("GetPolicyPremiumAllocation", "Policy")',

                data: { policyID: selPolicyId },

                type: 'POST',
                success: function (data) {
                    if (data.length >0) {                       

                        $("#modal_dialog").load(data);
                        $("#modal_dialog").dialog("open");
                    }                 
            }

            });
        });

        $("#modal_dialog").dialog({
            autoOpen: false,
            height: 600, width: 'auto',
            title: "Premium Allocation",
            buttons: {
                Cancel: function () {                   
                    $(this).dialog("close");                 

                }
            },
            modal: true
        });
    })
</script>

When I click on the Cancel button of the popup window, it does not close.

I have included the following files as well.

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

Unable to figure out what I am doing wrong. Please, help.

Answer 1

use $("#modal_dialog") instead of $(this). this refers the current object only .

$("#modal_dialog").dialog({
   autoOpen: false,
    height: 600, width: 'auto',
    title: "Premium Allocation",
    buttons: {
        Cancel: function () {                   
            $("#modal_dialog").dialog("close"); 
        }
    },
    modal: true
});