Диалоговое окно пользовательского интерфейса jQuery не расположено в центре экрана

Question

У меня есть диалоговое окно jQuery, которое должно располагаться в центре экрана.Однако по вертикали кажется немного смещенным от центра.

Вот код:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

Есть идеи, почему это не центрируется?

Answer 1

Если окно просмотра прокручивается после отображения диалогового окна, оно больше не будет центрировано.Можно непреднамеренно вызвать прокрутку области просмотра, добавляя или удаляя контент со страницы.Вы можете центрировать диалоговое окно во время событий прокрутки/изменения размера, вызвав:

$('my-selector').dialog('option', 'position', 'center');

Answer 2

Добавляете ли вы jquery.ui.position.js на свою страницу?У меня была такая же проблема, проверил исходный код здесь и понял, что после этого я не добавил этот js на свою страницу.диалог магически центрирован.

Answer 3

Здесь раскапывают старую могилу, но для новых пользователей Google.

Вы можете сохранить положение окна модели при прокрутке пользователем, добавив это событие в свой диалог.Это изменит его с абсолютно позиционированного на фиксированное.Нет необходимости отслеживать события прокрутки.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

Answer 4

У меня была та же проблема.В итоге это оказалось jquery.dimensions.js плагин.Если я его удалил, то все работало нормально.Я включил его из-за другого плагина, который этого требовал, однако я узнал об этом по ссылке здесь эти измерения были включены в ядро ​​jQuery довольно давно (http://api.jquery.com/category/dimensions).Все будет в порядке, просто избавьтесь от плагина размеров.

Answer 5

1.) Диалоговое окно jQuery центрируется в любом элементе, в который вы его поместили.

Без дополнительной информации я предполагаю, что у вас есть элемент body с отступом или что-то в этом роде.Переместите всплывающий элемент div на уровень тела, и все готово.

2.) Если вы динамически добавляете контент в div при его загрузке, центрирование НЕ будет правильным.НЕ отображайте div, пока у вас не будет данных, которые вы в него поместите.

Answer 6

Просто добавьте строку CSS ниже на той же странице.

.ui-dialog 
{
position:fixed;
}

Answer 7

Чтобы решить эту проблему, я установил высоту своего тела на 100%.

body { height:100% }

Это также сохраняет центральное положение во время прокрутки пользователем.

Answer 8

Добавьте это в объявление вашего диалога

my: "center",
at: "center",
of: window

Пример :

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Answer 9

Для меня виновником был jquery.dimensions.js

Answer 10

Эта проблема часто связана с открытием диалогового окна с помощью тега привязки (<a href='#' id='openButton'>Open</a>) и не предотвращать поведение браузера по умолчанию в обработчике, например.

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

Обычно это устраняет необходимость в каких-либо плагинах позиционирования/прокрутки.

Answer 11

Я столкнулся с той же проблемой: диалоговое окно не открывалось по центру и не прокручивало мою страницу вверх.Тег, который я использую для открытия диалогового окна, является тегом привязки:

<a href="#">View More</a>

Символ фунта вызывал у меня проблему.Все, что я сделал, это изменил href в якоре следующим образом:

<a href="javascript:{}">View More</a>

Теперь моя страница счастлива и центрирует диалоги.

Answer 12

Мой сценарий: Мне пришлось прокрутить страницу вниз, чтобы открыть диалоговое окно нажатием кнопки, из-за прокрутки окна диалоговое окно не открывалось вертикально по центру окна, оно выходило за пределы окна просмотра.

Как Кен Как уже упоминалось выше, после того, как вы установили модальный контент, выполните оператор ниже.

$("selector").dialog('option', 'position', 'center');

Если контент предварительно загружен до того, как Modal Opens просто выполняет это в открытом событии, иначе манипулируйте DOM в открытом событии, а затем выполните оператор.

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

Мне это помогло, и самое приятное то, что вам не нужно включать какой-либо другой плагин или библиотеку, чтобы он работал.

Answer 13

Только что решил ту же проблему, проблема заключалась в том, что я не импортировал некоторые js-файлы, например widget.js :)

Answer 14

Ни одно из вышеперечисленных решений, похоже, мне не помогло, поскольку мой код динамически генерирует два содержащих элемента div и внутри них некэшированное изображение.Мое решение было следующим:

Обратите внимание на вызов «load» в img и параметр «закрыть» в диалоговом вызове.

var div = jQuery('<div></div>')
                  .attr({id: 'previewImage'})
                  .appendTo('body')
                  .hide();
var div2 = jQuery('<div></div>')
                  .css({
                      maxWidth: parseInt(jQuery(window).width() *.80) + 'px'
                      , maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

Answer 15

Мне пришлось добавить это в начало моего HTML-файла: <!doctype html>.Мне не нужно было устанавливать position свойство.Это с jQuery 3.2.1.В 1.7.1 в этом не было необходимости.

Answer 16

Вот как я решил проблему, я добавил эту открытую функцию диалога:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

Теперь диалоговое окно открывается в верхней части экрана независимо от того, куда прокручивается страница, и во всех браузерах.

Answer 17

чтобы расположить диалог в центре экрана:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});

Answer 18

У меня была та же проблема, которая была исправлена, когда я ввел высоту диалога:

$("#dialog").dialog({
    height: 500,
    width: 800
});

Answer 19

Вы должны добавить декларацию

В верхней части документа.

Без этого jquery имеет тенденцию помещать диалоговое окно внизу страницы, и при попытке его перетаскивания могут возникнуть ошибки.

Answer 20

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Это решение работает, но только потому, что новые версии jQuery полностью игнорируют это и возвращаются к значениям по умолчанию, а это именно так.Итак, вы можете просто удалить позицию:«центр» из ваших опций, если вы просто хотите, чтобы всплывающее окно было центрировано.