Can .dialog() and .position() be used together in peaceful harmony?

Can .dialog() and .position() be used together in peaceful harmony?

I'm using:

  •       jQuery 1.4.1 (due to the 1.4.2-vsdoc.js not being available as of yet)
  •       jQuery UI 1.8
  •       ASP.NET 3.5 (VB.NET)

I'm trying to position my dialog in the center of my container div which wraps around all of my master page content.  I don't want to do a position [x,y] scenario where I have to formulaically figure out the appropriate x,y with regards to the top/left/height/width of the parent and the height/width of the dialog.  That's exactly what .position() helps us with and I would really like to use it with dialog() to easily plop it right there in the dead center of that container div.  Below, I created a VERY dumbed-down example of the HTML markup and then 2 cases of how I was hoping I could use position().  Is there anyone that can tell me if it's possible?

HTML markup:

  1. <div id="parent">
  2.       <span>This is my parent container.</span>


  4.       <div id="dialog">
  5.             <span>This is my dialog.</span>

  6.       </div>

  7. </div>

dialog() and position() try #1:

  1. $('#dialog').dialog({
  2.      
  3.       autoOpen : false,
  4.       buttons : {
  5.      
  6.             'Yes' : function() { $(this).dialog('close'); alert('Yes'); },
  7.             'No' : function() { $(this).dialog('close'); alert('No'); }
  8.       },
  9.       modal : true,
  10.       position : {

  12.             of : $('#parent'),
  13.             my : 'center',
  14.             at : 'center'     

  16.       },
  17.       title : 'My Dialog',
  18.       width : ' 200px'

  20. });

dialog() and position() try #2:

  1. $('#dialog')
  2.       .dialog({
  3.      
  4.             autoOpen : false,
  5.             buttons : {
  6.      

  7.                   'Yes' : function() { $(this).dialog('close'); alert('Yes'); },
  8.                   'No' : function() { $(this).dialog('close'); alert('No'); }
  9.             },
  10.             modal : true,
  11.             title : 'My Dialog',
  12.             width : '200px'

  14.       })
  15.       .position({


  17.             of : $('#parent'),
  18.             my : 'center',
  19.             at : 'center'     


  21.       });