Why is my jQueryUI Modal dialog not working?

I've got a simple task that's driving me nuts.

My jQuery code:

        $(document).ready(function() {
        $("#dialog_open").button().click(function () {
             $("#dialog_frame").open();
        });
        });
    
    $(document).ready(function() {
        $('#dialog_frame').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true;
        });
    });

HTML for the button:

                    <td>
                    <input type="button" id="dialog_open" value="Open" />
                </td>

HTML for the content of the modal popup:

<div id="dialog_frame" style="display:none;">
    <p>I am here!</p>    
</div>

When I click on my button, nothing happens. I also see the content for the dialog doesn't hide unless I put the display:none; in there.

What am I doing wrong? I've included links to jQuery, jQueryUI, and the jQueryUI CSS files but can't get this to work! (I've got other sites that work fine)

The open method of the .dialog widget should be invoked using :

$("#dialog_frame").dialog('open');

(instead of $("#dialog_frame").open() - doesn't this line of code raise an error in your javascript console ?)