Когда вы используете диалог jquery UI, все работает хорошо, за исключением одной вещи. Когда размер браузера изменяется, диалог просто остается в исходной позиции, что может быть очень раздражающим.
Вы можете проверить это на: http://jqueryui.com/demos/dialog/
Нажмите "пример модального диалога" и измените размер вашего браузера.
Мне бы очень хотелось, чтобы диалоги автоматически центрировались при изменении размера браузера. Это можно сделать эффективным образом для всех моих диалогов в моем приложении?
Спасибо большое!
Установка параметра position
заставит его использовать, поэтому используйте тот же селектор, который охватывает все ваши диалоги, где я использую #dialog
здесь ( если он не находит их, никаких действий не предпринимается, как и все jQuery):
jQuery UI до 1.10
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
jQuery UI 1.10 или выше
$(window).resize(function() {
$("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});
Здесь, на той же самой демонстрационной странице jQuery UI, добавляющей только код выше, мы просто добавляем обработчик в окно resize
событие с .resize()
, поэтому он запускает повторный центр в соответствующее время.
В качестве альтернативы ответ Ellesedil,
Это решение не сработало для меня сразу, поэтому я сделал следующее, которое также является динамическим, но сокращенным вариантом:
$( window ).resize(function() {
$(".ui-dialog-content:visible").each(function () {
$( this ).dialog("option","position",$(this).dialog("option","position"));
});
});
+1 для Ellesedil хотя
EDIT:
Много более короткая версия, которая отлично подходит для одиночных диалогов:
$(window).resize(function(){
$(".ui-dialog-content").dialog("option","position","center");
});
Не обязательно использовать .each(), возможно, если у вас есть уникальные диалоги, которые вы не хотите касаться.
Более полный ответ, который использует ответ Ник более гибким способом, можно найти здесь.
Ниже приведена адаптация кода релевантности из этого потока. Это расширение по существу создает новый диалог, называемый autoReposition, который принимает true или false. В коде, указанном по умолчанию, используется опция true. Поместите это в файл .js в своем проекте, чтобы ваши страницы могли использовать его.
$.ui.dialog.prototype.options.autoReposition = true;
$(window).resize(function () {
$(".ui-dialog-content:visible").each(function () {
if ($(this).dialog('option', 'autoReposition')) {
$(this).dialog('option', 'position', $(this).dialog('option', 'position'));
}
});
});
Это позволяет вам указать "true" или "false" для этого нового параметра при создании своего диалога на вашей странице.
$(function() {
$('#divModalDialog').dialog({
autoOpen: false,
modal: true,
draggable: false,
resizable: false,
width: 435,
height: 200,
dialogClass: "loadingDialog",
autoReposition: true, //This is the new autoReposition setting
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
});
});
Теперь этот диалог всегда будет перестраиваться. AutoReposition (или все, что вы вызываете параметр) может обрабатывать любые диалоги, которые не имеют позиции по умолчанию и автоматически переупорядочивают их при изменении размера окна. Поскольку вы настраиваете это при создании диалогового окна, вам не нужно каким-либо образом идентифицировать диалоговое окно, потому что функция перепозиционирования становится встроенной в сам диалог. И самое главное, так как это задано для каждого диалога, вы можете изменить некоторые диалоги, а другие останутся там, где они есть.
Кредит пользователю scott.gonzalez на форумах jQuery для полного решения.
Другой вариант CSS-only, который работает, - это. Отрицательные поля должны быть равны половине вашей высоты и половине вашей ширины. Таким образом, в этом случае мой диалог имеет ширину 720 пикселей и высоту 400 пикселей. Это центрирует его по вертикали и по горизонтали.
.ui-dialog {
top:50% !important;
margin-top:-200px !important;
left:50% !important;
margin-left:-360px !important
}
В качестве альтернативы можно использовать jQuery ui position,
$(window).resize(function ()
{
$(".ui-dialog").position({
my: "center", at: "center", of: window
});
});
Привет всем!
Решение Vanilla JS:
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 66);
}
}
function actualResizeHandler() {
$(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
}
}());
$(".ui-dialog-content").dialog("option", "position", "center");
, это проверит для любого диалога :)