Close jQuery UI Dialog Box

I have this link to close a jquery UI dialog box:

<a href="#" id="close-login-box">Close this window</a>

And here is the jQuery:

$("#login-link").click(function() {
    $("#login-box").dialog({ 
        close: function(ev, ui) { 
 开发者_如何学运维           $(this).hide();
        },
        draggable: false, 
        height: 300,
        modal: true,
        position: ["center","center"], 
        resizable: false, 
        width: 1020
    });
});

$("#close-login-box").click(function() {
    $("#login-box").dialog("close");
});

Why doesn't the dialog box close when I click the link?

---

You don't need

close: function(ev, ui) { 
        $(this).hide();
    },

Because $('#login-box').dialog('close'); will hide the dialog for you, there's no need to specify it yourself.