Form dialog JQUERY

[Zendar]

Hola, hice un form dialog con jquery y php y funciona perfecto.. el problema que tengo es que al abrirse la pagina se ve el formulario que va dentro del dialog y cuando presiono el boton q abre el formdialog se acomoda al dialog..

Lo correcto seria que se muestre el formulario cuando abre el dialog y no antes..

dejo mi codigo;

Código Javascript:

$('#dialog').dialog({
                bgiframe: true,
                autoOpen: false,
                resizable: false,
                modal: true,
buttons: {
                   "Consultar": function() {
 
                        dataString = $('form').serialize();
                    $.ajax({
                    type: "POST",
                    url: "trl.php",
                    data: dataString,
                    dataType: "json",
 
                       success: function(data) {
 
 
                        if(data == 'invalid'){
                            $('#message').html("<div class='errorMessage'>Date range is invalid.</div>");
                        } else {
                            $('#message').html("<div class='successMessage'>Date range is valid.</div>");
                            //location.reload();
                        }
                    }
 
 
                    });
       $( this ).dialog( "close" );
 
 
 
 
 
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
 
});
 $("#fecha_inicio").datepicker({altField: '#inicio',altFormat: 'yy-mm-dd',minDate: '-1y',maxDate: -1});
 $("#fecha_final").datepicker({altField: '#fin',altFormat: 'yy-mm-dd',minDate: '-1y',maxDate: -1});
 
$( "#dialog" ).dialog( "open" );
 

Código PHP:

<div id="dialog">
            <form>
                
        <label for="producto">Producto</label>
                <select name="producto" id="producto" class="text ui-widget-content ui-corner-all">
       
                                </select>
                <br>
                <br>
               
        <label for="fecha_inicial">Fecha Inicio</label>
                <input id="fecha_inicio" type="text" readonly /><input type="hidden" name="fecha_inicio" id="inicio" />
                <br>
                <br>
        <label for="fecha_final">Fecha Fin</label>
            <input id="fecha_final" type="text" readonly /><input type="hidden" name="fecha_final" id="fin"
                <br>
                <br>
                <label for="combo">Combo</label>
                <select name="combo" id="combo" class="text ui-widget-content ui-corner-all">
 
                    <option >uno</option>
                    <option >dos</option>
 
                </select>           
    </form>
        
        </div>
 

ALguien me puede ayudar???