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!
źródło
$(".ui-dialog-content").dialog("option", "position", "center");
to sprawdzi każde okno dialogowe :)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:
Jednak +1 dla Ellesedila
EDYTOWAĆ:
Znacznie krótsza wersja, która świetnie sprawdza się w pojedynczych dialogach:
Nie jest konieczne używanie .each (), jeśli masz jakieś unikalne okna dialogowe, których nie chcesz dotykać.
źródło
.resize()
i wewnątrz, jeśli licznik osiągnie10
lub20
wtedybreak;
, nie miałem tego problemu, nie obsługuję tych urządzeń / przeglądarek. Musisz wypróbować rozwiązanie, które jeśli utknie, możesz się z niego wydostać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ć.
Umożliwia to podanie wartości „prawda” lub „fałsz” dla tego nowego ustawienia podczas tworzenia okna dialogowego na stronie.
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.
źródło
$(".ui-dialog-content:visible").each(function () { if ($(this).dialog('option', 'autoReposition')) { $(this).dialog('option', 'position', $(this).dialog('option', 'position')); } });
Działa świetnie :)$( "#dialog" ).dialog( "option", "position" )
na$(this).data("dialog").options.position
później. W każdym razie, teraz ta odpowiedź działa!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.
źródło
Alternatywnie można użyć pozycji jQuery ui ,
źródło
Cześć wszystkim!
Rozwiązanie Vanilla JS:
źródło
$.isVanillaJS == false