Блог

Прямо сейчас у меня есть веб-сайт, который кто-то создал для меня, и, к сожалению, я застрял. Я немного понимаю, но остаюсь полным новичком. У меня есть картинки, которые я хочу для всплывающего окна, но всякий раз, когда я устанавливаю высоту и ширину на ‘auto’, поле располагается внизу страницы?

Мне нужно, чтобы он также автоматически центрировался при изменении размера, если это возможно.

Кто-нибудь, пожалуйста, помогите мне воссоздать мой код? Спасибо.

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

Проблема, с которой вы сталкиваетесь, заключается в том, что при открытии диалогового окна оно пустое, а позиция вычисляется. Затем вы загружаете содержимое, и оно автоматически не пересчитывает новое положение центра. Вам нужно сделать это самостоятельно в обработчике событий onComplete. Смотрите ниже, я также вставил несколько хороших загрузочных текстов 🙂

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