jQuery UI dialog jump issue workaround

When jQueryUI Dialog is used with "draggable = on", it would jump down by the scroll offset of parent page when the Dialog is being dragged via mouse. One of the nice workarounds to keep the draggable jQuery UI dialog in proper position without "jumping down" would be to set the dialog's parent position to 'fixed'. (By the way, this is the default behavior of Bootstrap's default modal window behavior, too.)

Below is a simple example to implement this workaround to a jQuery UI dialog. This works equally well for both modal and non-modal dialogs.

$(function(){
  $('#dialog_1').dialog({
    autoOpen: false,
    create: function( event ){  
      // set dialog's parent position to 'fixed' under the create event    
      $( event.target ).parent().css( 'position', 'fixed' );
    }
  });
  $('#btn_1').click(function(){
    // to reposition the dialog to the center when re-opened
    $('#dialog_1').dialog( 'option', 'position', 'center' );
    $('#dialog_1').dialog( 'open' );
  });
});

Hopefully, this workaround will provide better user experience on top of all the great features in jQuery UI library.