Jak automatycznie wyśrodkować okno dialogowe interfejsu użytkownika jQuery podczas zmiany rozmiaru przeglądarki?

Kiedy używasz okna dialogowego jquery UI, wszystko działa dobrze, z wyjątkiem jednej rzeczy. Po zmianie rozmiaru przeglądarki okno dialogowe pozostaje w początkowej pozycji, co może być naprawdę denerwujące.

Możesz to przetestować na: http://jqueryui.com/demos/dialog/

Kliknij przykład „modalnego okna dialogowego” i zmień rozmiar przeglądarki.

Chciałbym móc automatycznie wyśrodkować okna dialogowe przy zmianie rozmiaru przeglądarki. Czy można to zrobić w efektywny sposób dla wszystkich okien dialogowych w mojej aplikacji?

Wielkie dzięki!

Ustawienie tej positionopcji wymusi to, więc po prostu użyj tego samego selektora obejmującego wszystkie okna dialogowe, których #dialogtutaj używam (jeśli ich nie znajdzie, nie zostanie podjęta żadna akcja, jak wszystkie jQuery):

jQuery UI przed 1.10

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

jQuery UI 1.10 lub nowszy

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

Oto ta sama strona demonstracyjna interfejsu użytkownika jQuery, która dodaje tylko powyższy kod , po prostu dodajemy procedurę obsługi do resizezdarzenia okna za pomocą .resize(), więc wyzwala ponowne wyśrodkowanie w odpowiednim czasie. Wcześniejsze

Alternatywnie do odpowiedzi Ellesedila,

To rozwiązanie nie zadziałało u mnie od razu, więc zrobiłem następującą wersję, która również jest dynamiczna, ale skrócona:

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

Jednak +1 dla Ellesedila

EDYTOWAĆ:

Znacznie krótsza wersja, która świetnie sprawdza się w pojedynczych dialogach:

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

Nie jest konieczne używanie .each (), jeśli masz jakieś unikalne okna dialogowe, których nie chcesz dotykać.

Bardziej wyczerpującą odpowiedź, która wykorzystuje odpowiedź Nicka w bardziej elastyczny sposób, można znaleźć tutaj .

Poniżej znajduje się adaptacja odpowiedniego kodu z tego wątku. To rozszerzenie zasadniczo tworzy nowe ustawienie okna dialogowego o nazwie autoReposition, które akceptuje wartość true lub false. Kod w postaci zapisanej domyślnie przyjmuje wartość true. Umieść to w pliku .js w swoim projekcie, aby Twoje strony mogły to wykorzystać.

    $.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'));
            }
        });
    });

Umożliwia to podanie wartości „prawda” lub „fałsz” dla tego nowego ustawienia podczas tworzenia okna dialogowego na stronie.

$(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");
            }
        }
    });
});

Teraz to okno dialogowe zawsze będzie się zmieniać. AutoReposition (lub jakkolwiek nazywasz to ustawienie) może obsłużyć wszystkie okna dialogowe, które nie mają domyślnej pozycji i automatycznie zmienić ich położenie, gdy okno zmieni rozmiar. Ponieważ ustawiasz to podczas tworzenia okna dialogowego, nie musisz w jakiś sposób identyfikować okna dialogowego, ponieważ funkcja zmiany położenia zostaje wbudowana w samo okno dialogowe. A najlepsze jest to, że ponieważ jest to ustawiane w oknie dialogowym, możesz zmienić położenie niektórych dialogów, a inne pozostać na swoim miejscu.

Podziękowania dla użytkownika scott.gonzalez na forach jQuery za kompletne rozwiązanie.

Inną działającą tylko opcją CSS jest ta. Ujemne marginesy powinny równać się połowie wysokości i połowie szerokości. W tym przypadku moje okno dialogowe ma szerokość 720 pikseli i wysokość 400 pikseli. Powoduje to wyśrodkowanie go w pionie i poziomie.

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

Alternatywnie można użyć pozycji jQuery ui ,

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

Cześć wszystkim!

Rozwiązanie 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 });
  }
}());