Question

Right now, I have a website that someone made for me, and unfortunately, I’m stuck. I understand a little, but remain to be a total novice. I have pictures I want for the pop-up, but whenever I set the height and width to ‘auto’, the box locates to the bottom of the page?

I need it to auto center on resize as well if possible.

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 you are having is that when the dialog opens it is empty and the position is calculated. Then you load the content and it does not automatically recalculate the new center position. You need to do this yourself in the onComplete event handler. See below, I have also put in some nice loading text 🙂

<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>