Як автоматизувати діалогове вікно інтерфейсу jQuery при зміні розміру браузера?

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

Ви можете перевірити це на веб-сайті: http://jqueryui.com/demos/dialog/

Клацніть на прикладі "модальне діалогове вікно" та змініть розмір браузера.

Я хотів би мати можливість пускати діалогові автоматичні центри, коли веб-переглядач змінює розмір. Чи можна це зробити ефективно на всіх діалогах у моїй програмі?

Дуже дякую!

Якщо встановити positionпараметр, це змусить це зробити, тому просто використовуйте той самий селектор, що охоплює всі ваші діалоги, де я #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, що додає лише код вище , ми просто додаємо обробник до resizeподії вікна .resize(), тому він запускає перецентр у відповідний час. Сігналы абмеркавання

Як варіант відповіді Еллеседіла,

Це рішення для мене не вийшло відразу, тому я зробив наступне, що також є динамічним, але скороченим версією:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

Хоча +1 для Ellesedil

Редагувати:

Набагато коротша версія, яка чудово працює для окремих діалогів:

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

Не обов’язково використовувати .each (), можливо, якщо у вас є унікальні діалоги, до яких ви не хочете торкатися.

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

Нижче наведено адаптацію коду відповідності з цієї теми. Це розширення по суті створює нове налаштування діалогу під назвою autoReposition, яке приймає істинне чи помилкове. Код як написаний за замовчуванням параметр 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'));
            }
        });
    });

Це дозволяє надати "справжнє" або "помилкове" для цього нового налаштування під час створення діалогового вікна на вашій сторінці.

$(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 за повне рішення.

Ще один варіант, який працює лише для CSS, це такий. Від'ємні поля повинні дорівнювати половині вашої висоти та половині вашої ширини. Тож у цьому випадку мій діалог має ширину 720 пікселів на 400 пікселів у висоту. Це центрує його вертикально і горизонтально.

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Альтернативно можна використовувати позицію jQuery ui ,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

Привіт усім!

Розчин ванілі 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 });
  }
}());