Most efficient way to close a load() page using the X sign in jquery

Question

I'm new to Jquery and I'm trying to use a div container to load a URL, however, I want to give a user an option to close it with an X sign on the top right corner like in Amazon.com. What's the best way to accomplish this?

Here's what I have and seems clumsy to figure out where the top right corner is and place the image X:

$("#url_link_details").click(function() {
    $("#details").load("tooltip_address.htm", function() {
        $(this).addClass("openwindow").show();
        $(".img_close").addClass("img_close_show").show();
    })
});

Any help is appreciated.

Answer 1

some html:

<div id="popup">
    <img src="x.gif" alt="Close" class="img_close" />
    <div class="details"></div>
</div>

some css:

#popup .img_close {
    float: right;
}

#details {
    clear: right; /* if you want there to be a "titlebar" area */
}

some jQuery

$('#url_link_details").click(function() {
    $('#details').load('tooltip_address.htm', function() {
        $('#popup')
            .show()
            .find('.img_close')
            .click(function() {
                $('#popup').hide();
            })
        ;
    })
})