it-swarm.com.ru

диалоговое окно jQuery UI не расположено в центре экрана

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

Вот код:

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

Любые идеи, почему это не будет в центре?

38
David

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

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

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

34
Eugenio Miró

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

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

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

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

14
coryvb123

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

.ui-dialog 
{
position:fixed;
}
10
Rajkishor Sahu

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

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

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

10
Stefan Kendall

Добавьте это к вашей декларации диалога

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

Пример :

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

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

body { height:100% }

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

4
user781058

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

3
Eswar

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

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

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

3
Rob Willis

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

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

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

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

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

2
Jimbo

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

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

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

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

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

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

2
Sanjeev

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

1
user2233706

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

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

 var div = jQuery ('<div> </ div>') 
 .attr ({id: 'previewImage'}) 
 .appendTo ( 'тело') 
 .hide (); 
 var div2 = jQuery ('<div> </ div>') 
 .css ({.____ '
, 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 (); 
} 
}); 
}); 
1
shmuel613

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

1
vach

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

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

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

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

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

0
thedrs

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

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

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

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

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

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

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

0
Tassilo Singhammer