nav-left cat-right
cat-right

Center JQuery Dialog...

By default, the JQuery Dialog widget will open in the center of the page. To demonstrate, imagine that you have a dialog created as follows:

<div id="myDialog" title="Help">
  [Some help information]
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#myDialog").dialog({
      autoOpen: false,
      modal: true,
    });
  });
</script>

This dialog is instantiated when the page is loaded. Because of this approach, the center is determined by the height and width of the page at load time. Now, imagine that you have a page that dynamically adds content. Or maybe you have a tree of elements and one of the nodes gets expanded. In either case, the height of the page will most likely change. Because of this, if you open the dialog now, it will look off-center. To re-center the dialog, add the following line of code:

$("#myDialog").dialog('option', 'position', 'center');

Voila! This code will re-center your dialog. As a recommendation, you may want to execute this code at one of two times: 1) Right after your page size changes, for instance, after the new content is added or node is expanded. 2) Just before you open the dialog. The choice is yours :)