JQuery user interface: auto size and auto center

Question

Now I have a website that someone made for me, and, unfortunately, I'm stuck. I understand a little, but remain a complete beginner. I have snapshots that I want for the popup, but when I set the height and width to “auto”, is the box at the bottom of the page?

I need it to automatically center when resized.

Please help me recreate my code, anyone? Thanks.

<script type="text/javascript"> function openDialog(url) { $("<div class='popupDialog'></div>").load(url) .dialog({ autoOpen: true, closeOnEscape: true, height: '1012', modal: true, position: ['center', 'center'], title: 'About Ricky', width: 690 }).bind('dialogclose', function() { jdialog.dialog('destroy'); }); } </script> 

Answer 1

The problem that you encounter is that when you open a dialog, it is empty and the position is calculated. Then you download the content and do not automatically recount the new center position. You need to do this yourself in the onComplete event handler. See below, I also added some useful downloadable texts :)

 <script type="text/javascript"> function openDialog(url) { $("<div class='popupDialog'>Loading...</div>") .dialog({ autoOpen: true, closeOnEscape: true, height: '1012', modal: true, position: ['center', 'center'], title: 'About Ricky', width: 690 }).bind('dialogclose', function() { jdialog.dialog('destroy'); }).load(url, function() { $(this).dialog("option", "position", ['center', 'center'] ); }); } $(window).resize(function() { $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); }); </script>