Display PartialView as a popup

In my view, I have;

@foreach (var item in Model)
{
    <li>@Html.ActionLink("click me", "popup", "SomeData", new{id = item.ID}, new {@class = "PopUp"})</li>
}

Then I have a controller that looks like this:

public ActionResult popup(Guid id)
{
    var singelData = db.SomeRandomData.Find(id);

    return PartialView(singelData);
}

And a partial view that looks like this:

<div>This a popup</div>
@Model.metadata1

So far, so good, when I click on the link, I am redirected to a partial view.

Now that I’m not comfortable, the script section, here is my attempt;

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script type="text/javascript">
    $(function () {
        $('.PopUp').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true
            }).load(this.href, {});

            return false;            
        });
    });
</script>

But he still just returns the view. Where am I mistaken?