JQuery dialog height issues

Question

I can’t make the dialog open the height I want, I can see the title bar, but I don’t get the content until I open the dialog with the mouse

My code is http://jsfiddle.net/Uu2G4/3/

<div id="ImageDialog" style="display:none;height:500px;" class="ImageDialog ui-dialog">
    <div style="height:500px;">
        This is making me crazy!!!!
        <img class="productImage" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
    </div>
</div>

$(document).ready(function () {
    // init the image popup dialog
    $("#ImageDialog").dialog({ autoOpen: false, height: 500 });

    $(".open").click(function()
                 {
                     $("#ImageDialog").dialog("open");
                 });

    $(".close").click(function()
                 {
                     $("#ImageDialog").dialog("close");
                 });
});

Answer 1

I set the div class to ui-dialog in HTML

removal of this problem is resolved.

<div id="ImageDialog" style="display:none;height:500px;" class="ImageDialog">
    <div style="height:500px;">
        This is making me crazy!!!!
        <img class="productImage" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
    </div>
</div>

$(document).ready(function () {
    // init the image popup dialog
    $("#ImageDialog").dialog({ autoOpen: false, height: 500 });

    $(".open").click(function()
                 {
                     $("#ImageDialog").dialog("open");
                 });

    $(".close").click(function()
                 {
                     $("#ImageDialog").dialog("close");
                 });
});