Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Modal Windows - problem, Zmiana skryptu wyświetlania okna dialogowego.
Waloch016
post
Post #1





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 2.10.2010
Skąd: Irlandia

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


Cześć mam mały problem konkretnie używam okienek dialogowych zamiast podstron na stronie z tym że problem zaczyna się pojawiać jeśli kliknę w link na dole strony bo muszę przewinąć stronę znów do góry żeby zobaczyć co w okienku wyskakuje. Czyli reasumując okno dialogowe pojawia się wycentrowane u góry strony jak to zmienić żeby się pojawiało wycentrowane względem ekranu??[tj. żeby obojętnie czy na dole strony czy środku czy do góry okienko dialogowe zawsze pojawiało się użytkownikowi na środku ekranu? Załączam skrypt[wiem że tutaj jest gdzieś problem i przypuszczam że trzeba dodać wartości scroll ale nie znam javascript i nie wiem jak to podmienić]:

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. <script>
  3.  
  4. $(document).ready(function() {
  5.  
  6. //select all the a tag with name equal to modal
  7. $('a[name=modal]').click(function(e) {
  8. //Cancel the link behavior
  9. e.preventDefault();
  10.  
  11. //Get the A tag
  12. var id = $(this).attr('href');
  13.  
  14. //Get the screen height and width
  15. var maskHeight = $(document).height();
  16. var maskWidth = $(window).width();
  17.  
  18. //Set heigth and width to mask to fill up the whole screen
  19. $('#mask').css({'width':maskWidth,'height':maskHeight});
  20.  
  21. //transition effect
  22. $('#mask').fadeIn(1000);
  23. $('#mask').fadeTo("slow",0.8);
  24.  
  25. //Get the window height and width
  26. var winH = $(window).height();
  27. var winW = $(window).width();
  28.  
  29. //Set the popup window to center
  30. $(id).css('top', winH/2-$(id).height()/2);
  31. $(id).css('left', winW/2-$(id).width()/2);
  32.  
  33. //transition effect
  34. $(id).fadeIn(2000);
  35.  
  36. });
  37.  
  38. //if close button is clicked
  39. $('.window .close').click(function (e) {
  40. //Cancel the link behavior
  41. e.preventDefault();
  42.  
  43. $('#mask').hide();
  44. $('.window').hide();
  45. });
  46.  
  47. //if mask is clicked
  48. $('#mask').click(function () {
  49. $(this).hide();
  50. $('.window').hide();
  51. });
  52.  
  53. });
  54.  
  55. </script>
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
sylwekqaz
post
Post #2





Grupa: Zarejestrowani
Postów: 40
Pomógł: 6
Dołączył: 5.03.2011

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


żeby okienko (div jak się domyślam lub coś podobnego) było na środku dajesz w css
  1. position:fixed;
  2. top:50%;
  3. left:50%;
  4. margin-top:0;
  5. margin-left:0;


i skrypt
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
  2. <script type="text/javascript">
  3. function okienko_centruj(){
  4. X = $("#okienko").offsetWidth;
  5. Y = $("#okienko").offsetHeight;
  6. X = (X/2)*(-1);
  7. Y = (Y/2)*(-1);
  8. $("#okienko").css("margin-left", X ).css("margin-top", Y );
  9. }


dodaj do okienka <okienko onresize="okienko_centruj();">

skrypt pisany na szybko wiec coś może nie działać

Go to the top of the page
+Quote Post
Waloch016
post
Post #3





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 2.10.2010
Skąd: Irlandia

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


Dzięki za pomoc wystarczyło tylko te CSS podmienić z absoluta na fixed i jest ok (IMG:style_emoticons/default/smile.gif) Temat do zamknięcia
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 24.08.2025 - 09:45