Forum PHP.pl > [jQuery UI] Dialog - Rozszerzanie na wysokosc layotu? dlaczego?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery UI] Dialog - Rozszerzanie na wysokosc layotu? dlaczego?

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

haryb

14.04.2010, 01:02:57

Mam następujacy kod okna dialogowego:

[PHP] pobierz, plaintext 
$("#dialog-modal").dialog({
      			height: 40,
      			modal: true,
      			resizable: false,
      			draggable: false,
      			dialogClass: 'komunikat sukces'
      		});
      		$("#dialog-modal").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar-close").remove();
[PHP] pobierz, plaintext

I wszystko dział ok - tylko że :
Nie wiem dlaczego w momencie jak pojawia sie pole dialogowe to strona w przeglądarce dziwnie dostaje suwak pionowy.
W podstronie gdzie już na start mam suwak pionowego przewijania - tez widać ze jak się pojawia okienko to suwak przestrzeń strony sie dziwnie - niewidocznie powiększa na wysokość bo suwak się zwiększa - jego obszar, jak okienko wyłączy się - wszystko wraca do normy.

Myślałem że to przez modal - ma jakaś wielkość ustawiona - ale po wyłączeniu tak samo.
Później kombinowałem z pozycja samego okna dialogowego - ale to nie ma znaczenia i nawet jeśli je wyświetlę na samej gorze strony taka sytuacja ma miejsce.
Kolejno odłączyłem wszystkie css odnośnie ui dialog ale to także nie pomogło.

Przed chwila skopiowałem kod demo tego dialogu z oficjalnej strony.
Pousuwałem zaciągane css - zeby jeszcze uprościć kod:
Wyszło coś takiego - jak zapiszecie sobie to jako plik html podepniecie te dwa pliki js to sami zobaczycie ze po otworzeniu pliku pojawi sie odrazu okienko a w przeglądarce pojawi sie suwak pionowy. Jak wciśniecie ESC żeby zamknąć okno dialogowe to wówczas strona będzie normalnie wyświetlana.

[HTML] pobierz, plaintext 
<html>
  <head>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
 
	<script type="text/javascript">
	$(function() {
 
		$("#dialog").dialog("destroy");
		$("#dialog-modal").dialog({
			height: 140,
			modal: true
		});
	});
	</script>
</head>
<body>
 
<div id="dialog-modal" title="Basic modal dialog">
	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
 
</body>
</html>
 
[HTML] pobierz, plaintext

Czy spotkaliście się z tym?
Może coś - jeszcze trzeba ustawić -? Jakiś parametr samego okna dialogowego lub warstwy?
A może coś w samych css lub układzie mojego template strony musiałbym zmienic?

Z pomoc będę wdzięczny.

pozdro
Hary

ziqzaq

14.04.2010, 08:51:03

Dzieje się tak przez overlay (div.ui-widget-overlay).
Dodaj sobie do tego przykładowego kodu style theme (jest w paczce) dla jquery-ui np.

[HTML] pobierz, plaintext 
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="all" />
[HTML] pobierz, plaintext

i zacznie ładnie działać.

haryb

14.04.2010, 10:45:15

Wielkie dzięki - działa.
Chodż dodatkowo w swoim kodzie rozwalało mi styl klawisza:
dialogClass: 'komunikat sukces'

Po wyłaczeniu go juz sie nie pojawia suwak.
Ale ten css faktycznie tez jest obowiazkowy.

Pozdro
Hary

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.