jQueryUI Modal dialog not working

Question

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 clock 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)

Answer 1

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 ?)

Answer 2

Use this

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