Why jQuery dialogs produces a "height value" when it opens?

I can't understand a thing. When I have a jQuery dialog matched by a button...and this dialog come up from a 'display:none' state..well..why this dialog produces a "height value" in the page?

I would mean, when dialog is open..the right common scrolling bar become more long and, at the same time, the page has a large white space (when you scroll it out).

Is anyone with the same problem? Is anyone that can please give me an explanation?

please apologyze me if I'm late with the response.

Note that dialog produces "more height value" in all browsers. I don't know why it happens.

Here you are a little code:

<script type="text/javascript">
$(document).ready(function() {
 $('<div class="error-dialog"></div>')
  .show('fade')
  .html('This dialog will show every time! <input id="close" type="button" value="Chiudi" />')
  .dialog({
    autoOpen: true,
    closeOnEscape: false,
    draggable: false,
    height: 'auto',
    modal: false,
    position: ['right','top']
 });

 $('#close').click(function() {
  $('.error-dialog').hide('fade', function() {
   $(this).dialog('destroy');
  });
 });

 setTimeout(function() {
  $('.error-dialog').hide('fade', function() { $(this).dialog('destroy'); });
 }, 2000);
});
</script>

This piece of code is inserted in a php value and then, with an echo statement, i开发者_如何学Gos displayed on desktop after a (wrong) form submission. This dialog will be displayed (as declared in the code) at the right-top but...look at the empty space...

Note that if you use echo statement through php you'll need to escape double-quotes.

Thanks in advance.