how do you launch a jquery dialog when you click on a <a href> link

Question

how do you launch a jquery dialog when you click on a link

this doesn't seem to work

 <script type="text/javascript">
  $(document).ready(function() {

  $("a.To").click(function(e) {
      e.preventDefault();
      $("#dialog").dialog({height:300});
  });

in the body:

<a href="#" id="To">To</a>

Answer 1

For id you should use # :

$("a#To")

Dot is for classes.

Answer 2

I did this recently for confirming delete links in my cms. First you should instantiate a dialog window (this is so if you click close on the dialog and then open it again, it shows up...otherwise, it's destroyed):

$(document).ready(function()
{
    /**
     * Create a dialog box for confirming deletes.
     * This creates the box at domready. The box is opened
     * by a call to dialog("open") in the delete link.
     */
    $("#delete-dialog").dialog({
        autoOpen   : false,
        bgiframe   : true,
        buttons    : {
            "Yes, I'm sure" : function()
            {
                $(this).dialog("close");
                var href = $(this).dialog("option", "href");
                var row = $(this).dialog("option", "row");
                $.doDelete(href, row);
            },
            "Cancel" : function()
            {
                $(this).dialog("close");
            }
        },
        height     : 150,
        modal      : true,
        overlay    : {
            backgroundColor : "#000000",
            opacity         : 0.75
        },
        resizable : false
    });
});

Then "hook up" the a tags (still in the document.ready block):

/**
 * Make all delete links confirm before sending to delete path.
 */
$("a.delete-href").live("click", function(event) 
{
    event.preventDefault();

    var href = $(this).attr("href");
    var row = $(this).parent().parent();

    // pass some custom options to the dialog
    $("#delete-dialog").dialog("option", "href", href);
    $("#delete-dialog").dialog("option", "row", row);
    // open the previously init'ed dialog
    $("#delete-dialog").dialog("open");
});