Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Modal Windows - problem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Waloch016
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
sylwekqaz
ż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ć

Waloch016
Dzięki za pomoc wystarczyło tylko te CSS podmienić z absoluta na fixed i jest ok smile.gif Temat do zamknięcia
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.