Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery UI] Dialog - Rozszerzanie na wysokosc layotu? dlaczego?
haryb
post 14.04.2010, 01:02:57
Post #1





Grupa: Zarejestrowani
Postów: 137
Pomógł: 0
Dołączył: 9.11.2004
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

Mam następujacy kod okna dialogowego:
[PHP] pobierz, plaintext 
  1. $("#dialog-modal").dialog({
  2.       			height: 40,
  3.       			modal: true,
  4.       			resizable: false,
  5.       			draggable: false,
  6.       			dialogClass: 'komunikat sukces'
  7.       		});
  8.       		$("#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 
  1. <html>
  2.   <head>
  3. 	<script type="text/javascript" src="jquery-1.4.2.js"></script>
  4. 	<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
  5.  
  6. 	<script type="text/javascript">
  7. 	$(function() {
  8.  
  9. 		$("#dialog").dialog("destroy");
  10. 		$("#dialog-modal").dialog({
  11. 			height: 140,
  12. 			modal: true
  13. 		});
  14. 	});
  15. 	</script>
  16. </head>
  17. <body>
  18.  
  19. <div id="dialog-modal" title="Basic modal dialog">
  20. 	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
  21. </div>
  22.  
  23. </body>
  24. </html>
  25.  
[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

Ten post edytował haryb 14.04.2010, 01:17:52
Go to the top of the page
+Quote Post
ziqzaq
post 14.04.2010, 08:51:03
Post #2





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

Ostrzeżenie: (0%)
-----

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 
  1. <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ć.
Go to the top of the page
+Quote Post
haryb
post 14.04.2010, 10:45:15
Post #3





Grupa: Zarejestrowani
Postów: 137
Pomógł: 0
Dołączył: 9.11.2004
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.07.2025 - 12:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn