jQuery modal dialog not centering with position flag present

I have a site here...

I didn't create a fiddle because I'm not sure how to replicate the issue with ajax.

When the site loads, there's an auto-popup that brings in an ajax request.

It's way off center and when I add the position flag there, the modal doesn't come up at all. I don't get any syntax errors, so I'm not sure what's wrong.

With this code, the popup opens (but off center)...

$(document).ready( function() {
    jQuery('#compliance').load('jquery-ajax.html').dialog();
});

And when I add the position flag, it doesn't show up at all...

$(document).ready( function() {
    jQuery('#compliance').load('jquery-ajax.html').dialog({
        position: {my: "center top", at:"center top", of: window },
    });
});

Edit-

This is what ultimately worked...

    $(document).ready( function() {
        jQuery('#compliance').load('jquery-ajax.html').dialog({
        resizable: false,
        modal: true,
        width: 750,
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window }
        });
});

I believe your issue has to do with ajax being loaded into the modal box. This can cause content sizing issues among other things. You can try adding

jQuery('#compliance').load('jquery-ajax.html').dialog({
    resizable: false,
    modal: true,
    width:'auto'
});

Also for future reference, you shouldn't have to use jQuery when acting upon an element. You can use the $ sign. If this isn't working then you may have an issue with the load order of your javascripts in the DOM