How can I select the specific button on the dialog box then give it a close event?

How can I select the specific button on the dialog box then give it a close event?

Hi, I have a dialog box that shows a partial MVC view.  The dialog box does not close when I click on the close button.  It does close if I hit the escape key or click on the x at the top right of the box.  

 

I’ve seen a lot of examples out there but nothing has worked for me so far.  How can I select the specific button on the box then give it a close event?

 

Here’s my code so far:

 

<script type="text/javascript">

    $(document).ready(function () {

       

        $(function () {

 

 

            $('#my-dialog').dialog({

                autoOpen: false,

                width: 700,

                height: 600,

 

                title: "Schedule",

                resizable: false,

                modal: false,

                buttons: {

                    "Close": function () {

                        $(this).dialog("close");

                    }

                }

            });

 

            $('.modal').click(function () {

                $('#my-dialog').load(this.href, function () {

                    $(this).dialog('open');

                });

                return false;

            });

        });

    });

 

</script>