У меня есть диалоговое окно jQuery, которое предназначено для размещения в середине экрана. Тем не менее, он кажется немного нецентрированным по вертикали.
Вот код:
$('#add_box').dialog({
autoOpen: true,
width: 300,
modal: true,
resizable: false,
bgiframe:true
});
Любые идеи, почему это не будет сосредоточено?
Если окно просмотра будет прокручиваться после появления диалогового окна, оно больше не будет центрировано. Это позволяет непреднамеренно заставлять видовое окно прокручиваться, добавляя/удаляя содержимое со страницы. Вы можете повторно открыть диалоговое окно во время событий прокрутки/изменения размера, вызвав:
$('my-selector').dialog('option', 'position', 'center');
Вы добавляете jquery.ui.position.js на свою страницу? У меня была та же проблема, проверил исходный код здесь и понял, что я не добавил, что js на мою страницу, после этого.. диалог магически центрирован.
Копаем старую могилу здесь, но для новых поисковиков Google.
Вы можете сохранить положение окна модели, когда пользователи прокручиваются, добавляя это событие в свой диалог. Это изменит его от абсолютно позиционированного до фиксированного. Нет необходимости контролировать прокрутку событий.
open: function(event, ui) {
$(this).parent().css('position', 'fixed');
}
У меня была такая же проблема. Он оказался плагином jquery.dimensions.js. Если я удалю его, все будет хорошо. Я включил его из-за другого плагина, который этого требовал, однако я узнал из здесь, что измерения были включены в ядро jQuery довольно давно (http://api.jquery.com/category/dimensions). Вы должны быть в порядке, просто избавляясь от плагина размеров.
Просто добавьте строку CSS на той же странице.
.ui-dialog
{
position:fixed;
}
1.) Диалог jQuery центрируется в любом элементе, в который вы его ввели.
Без дополнительной информации, я предполагаю, что у вас есть div тела с краем или что-то вроде того. Переместите всплывающее окно на уровень тела, и вам будет хорошо идти.
2.) Если вы динамически добавляете содержимое в div при его загрузке, центрирование НЕ будет правильным. НЕ показывайте div до тех пор, пока у вас нет данных, которые вы вставляете в него.
Чтобы устранить эту проблему, я убедился, что мой рост был установлен на 100%.
body { height:100% }
Это также поддерживает центральное положение во время прокрутки пользователя.
Для меня jquery.dimensions.js был Culprit
Эта проблема часто связана с открытием диалога с помощью тега привязки (<a href='#' id='openButton'>Open</a>) и не предотвращения поведения браузера по умолчанию в обработчике, например.
$('#openButton').click(function(event) {
event.preventDefault();
//open dialog code...
});
Это обычно устраняет необходимость в любых плагинах позиционирования/прокрутки.
Добавьте это в объявление диалога
my: "center",
at: "center",
of: window
Пример:
$("#dialog").dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window
})
Я столкнулся с тем же вопросом, что диалог не открывается по центру и прокручивает мою страницу вверху. Тег, который я использую для открытия диалогового окна, является тегом привязки:
<a href="#">View More</a>
Символ фунта вызывал эту проблему для меня. Все, что я сделал, это изменить href в якоре так:
<a href="javascript:{}">View More</a>
Теперь моя страница счастлива и центрирует диалоги.
Мой сценарий: Мне пришлось прокручивать страницу вниз, чтобы открыть диалог нажатием кнопки, из-за прокрутки окна диалог не открывался вертикально по центру окна, он вышел из порта просмотра.
Как уже упоминалось выше 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');
}
});
Это сработало для меня, и самое лучшее, что вы не включаете в него какой-либо другой плагин или библиотеку для работы.
Просто решена та же проблема, проблема в том, что я не импортировал некоторые js файлы, например widget.js:)
Ни одно из вышеперечисленных решений, похоже, не работало для меня, так как мой код динамически генерирует два сдерживания 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();
}
});
});
Вот как я решил проблему, я добавил эту открытую функцию диалога:
open: function () {
$('.ui-dialog').css("top","0px");
}
Теперь открывается диалоговое окно в верхней части экрана, независимо от того, где прокручивается страница и во всех браузерах.
чтобы поместить диалог в центр экрана:
$('#my-selector').parent().position({
my: "center",
at: "center",
of: window
});
У меня была та же проблема, которая была исправлена, когда я ввел высоту для диалога:
$("#dialog").dialog({
height: 500,
width: 800
});
Вы должны добавить объявление
В верхней части документа.
Без него jquery имеет тенденцию помещать диалог в нижней части страницы, и при попытке его перетаскивания могут возникнуть ошибки.
$("#dialog").dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window
})
Это решение работает, но только из-за того, что новые версии jQuery игнорируют это полностью и возвращаются к умолчанию, что и есть именно это. Таким образом, вы можете просто удалить позицию: "центр" из ваших параметров, если вы хотите, чтобы всплывающее окно было центрировано.
Мне пришлось добавить это в начало моего HTML файла: <!doctype html>. Мне не нужно было устанавливать свойство position. Это с jQuery 3.2.1. В 1.7.1 это не было необходимо.