Диалоговое окно JQuery UI не размещено на центральном экране

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

.ui-dialog 
{
position:fixed;
}

Ответ 6

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

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

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

Ответ 7

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

body { height:100% }

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

Ответ 8

Для меня jquery.dimensions.js был Culprit

Ответ 9

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

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

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

Ответ 10

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

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

Пример:

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

Ответ 11

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

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

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

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

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

Ответ 12

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

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

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

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

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

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

Ответ 13

Просто решена та же проблема, проблема в том, что я не импортировал некоторые js файлы, например widget.js:)

Ответ 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();
                          }
                      });
                  });

Ответ 15

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

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

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

Ответ 16

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

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

Ответ 17

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

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

Ответ 18

Вы должны добавить объявление

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

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

Ответ 19

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

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

Ответ 20

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