Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Wyświetlanie zawsze na środku
Forum PHP.pl > Forum > Przedszkole
pawel.ad
Witam
Używam pluginu http://www.zurb.com/playground/reveal-modal-plugin
Wszystko jest super poza tym że chciałbym żeby "modal window" zawsze wyświetlało się na środku.
Teraz gdy scrolluje się stronę w dół, "modal window" zostaje na górze. Podejrzewam że jest to jedna wartość którą trzeba zmienić, ale nie mogę jej znaleźć, i byłbym wdzięczny za pomoc

JS: http://pastebin.com/9Prnk36G
CSS: http://pastebin.com/3AgmYcsD

***

Zgodnie z http://css-tricks.com/320-quick-css-trick-...-in-the-center/
zrobiłem coś takiego

  1. .reveal-modal {
  2. visibility: hidden;
  3. top: 50%;
  4. left: 50%;
  5. width: 670px;
  6. margin-top: -200px;
  7. margin-left: -375px;
  8. background: #eee url(modal-gloss.png) no-repeat -200px -80px;
  9. position: fixed;
  10. z-index: 101;
  11. padding: 30px 40px 34px;
  12. -moz-border-radius: 5px;
  13. -webkit-border-radius: 5px;
  14. border-radius: 5px;
  15. -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
  16. -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
  17. -box-shadow: 0 0 10px rgba(0,0,0,.4);
  18. }


I wszystko było by super, gdyby nie to że w zależności na której wysokości kliknę(tzn. jak bardzo zescrolluje na dół) na link to okno otwiera się gdzie indziej... ;/

Wydaje mi się że CSS bierze wartość "top:50%" od początku strony, a nie od początku tego co widzimy, tylko że nie wiem jak to zmienić...
Robert007
position: absolute; ?
pawel.ad
position: absolute umieszcza ją w danym miejscu na stronie, i tyle - podczas przewijania okno zostaje na górze, a mi chodzi żeby okno zjeżdżało na dół...
position: fixed wydaje się być poprawne, ale nie wiem jak sprawić żeby liczyło "top:50;" od fragmentu który widzimy, a nie od początku strony.

Coś podejrzewam że się nie dam, więc przydało by się jakieś nowe podejście - JavaScript? Tutaj się zupełnie nie orientuję, więc tym bardziej proszę o pomoc
crocodillo
jelśli ustawisz position:fixed, to przecież np: top:50px; ustawi element 50 pikseli od góry okna, a nie początku strony, chyba że Cię źle zrozumiałem
Arhimenrius
  1. .reveal-modal {
  2. visibility: hidden;
  3. top: 150%;
  4. left: 50%;
  5. margin-left: -300px;
  6. width: 520px;
  7. background: #eee url(modal-gloss.png) no-repeat -200px -80px;
  8. position: fixed;
  9. z-index: 101;
  10. padding: 30px 40px 34px;
  11. -moz-border-radius: 5px;
  12. -webkit-border-radius: 5px;
  13. border-radius: 5px;
  14. -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
  15. -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
  16. -box-shadow: 0 0 10px rgba(0,0,0,.4);
  17. }


Nie wiem czy o to Ci chodziło, bo ciężko zrozumieć kontekst. Jak coś, to spróbuję jeszcze pomóc.
pawel.ad
Domyślam się że trochę trudno zrozumieć o czym mówię smile.gif
Próbowałem zrobić jsfiddle ale, coś mi nie wychodziło.
Anyway chodzi o to że jeżeli link do otworzenia okna modalnego jest na dole to okno pojawia się wysoko:
http://dl.dropbox.com/u/17105048/Gora.png
Natomiast jeżeli link do okna jest nisko, to okno też pojawia się nisko:
http://dl.dropbox.com/u/17105048/Dol.png

No i nie wiem czemu tak się dzieje... Próbowałem zamiast "top:50%" dać jakąś stałą wartość, ale robi się jeszcze większa kaszana...

Aha, no i po tym jak okno się pojawi(wysoko, lub nisko) zostaje ono już w takiej pozycji podczas scrollowania, więc jestem w połowie drogi ;-)

***
OK, znalazłem przyczynę - style nadane w skrypcie nadpisują to co robię w pliku CSS przy wartości "top". Tylko że kompletnie nie znam się na JavaScripcie - próbuję wyciąć części kodu odpowiedzialne za zmianę danych lub zmienić je na statyczne dane, ale coś mi nie wychodzi...

Z tego co wywnioskowałem chodzi o poniższe kawałki:

[JAVASCRIPT] pobierz, plaintext
  1. var modal = $(this),
  2. topMeasure = parseInt(modal.css('top')),
  3. topOffset = modal.height() + topMeasure,
  4. locked = false,
  5. modalBG = $('.reveal-modal-bg');
  6.  
  7. ...
  8.  
  9. if(options.animation == "fadeAndPop") {
  10. modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
  11. modalBG.fadeIn(options.animationspeed/2);
  12. modal.delay(options.animationspeed/2).animate({
  13. "top": $(document).scrollTop()+topMeasure + 'px',
  14. "opacity" : 1
  15. }, options.animationspeed,unlockModal());
  16. }
  17.  
  18. ...
  19.  
  20. if(options.animation == "fadeAndPop") {
  21. modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
  22. modal.animate({
  23. "top": $(document).scrollTop()-topOffset + 'px',
  24. "opacity" : 0
  25. }, options.animationspeed/2, function() {
  26. modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
  27. unlockModal();
  28. });
  29. }
[JAVASCRIPT] pobierz, plaintext
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.