Как автоматически центрировать диалог jQuery UI при изменении размера браузера?

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

Вы можете проверить это на: http://jqueryui.com/demos/dialog/

Нажмите на пример "модального диалога" и измените размер вашего браузера.

Я бы хотел, чтобы диалоги автоматически центрировались при изменении размера браузера. Можно ли это сделать эффективным способом для всех моих диалогов в моем приложении?

Большое спасибо!

96 голосов | спросил Jorre 17 J0000006Europe/Moscow 2010, 12:44:30

5 ответов


0

Настройка position option заставит это сделать, поэтому просто используйте тот же селектор, охватывающий все ваши диалоги, где я использую #dialog здесь (если он не находит их, никакие действия не предпринимаются, как все jQuery):

Пользовательский интерфейс jQuery до 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() , поэтому он запускает повторное центрирование в соответствующее время.     

ответил Nick Craver 17 J0000006Europe/Moscow 2010, 14:40:33
0

Более подробный ответ, в котором более гибко используется ответ Ника, можно найти здесь .

Ниже приведена адаптация кода релевантности из этого потока. Это расширение по существу создает новую настройку диалога с именем 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");
            }
        }
    });
});

Теперь этот диалог всегда будет изменен. Автопозиционирование (или как вы называете настройку) может обрабатывать любые диалоги, которые не имеют позиции по умолчанию, и автоматически перемещать их при изменении размера окна. Так как вы устанавливаете это при создании диалога, вам не нужно как-то идентифицировать диалог, потому что функциональность репозиции становится встроенной в сам диалог. И что самое приятное, так как это устанавливается для каждого диалога, некоторые диалоги могут быть переставлены сами, а другие остаются там, где они есть.

Благодарим пользователя scott.gonzalez на форумах jQuery за полное решение.

ответил Ellesedil 3 Jam1000000amThu, 03 Jan 2013 00:46:58 +040013 2013, 00:46:58
0

Еще одна опция, работающая только с CSS: Отрицательные поля должны равняться половине вашего роста и половине вашей ширины. В этом случае мой диалог имеет ширину 720px и высоту 400px. Это центрирует его вертикально и горизонтально.

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}
ответил Kirk Ross 8 +04002014-10-08T02:51:18+04:00312014bEurope/MoscowWed, 08 Oct 2014 02:51:18 +0400 2014, 02:51:18
0

В качестве альтернативы можно использовать jQuery ui position ,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});
ответил AkilaI 18 +03002016-10-18T14:00:40+03:00312016bEurope/MoscowTue, 18 Oct 2016 14:00:40 +0300 2016, 14:00:40
0

Привет всем!

Решение 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 });
  }
}());
ответил Alexandr Kazakov 7 J0000006Europe/Moscow 2017, 19:54:16

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132