[CSS][JavaScript] Wyświetlanie zawsze na środku Opcje

[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

[CSS] pobierz, plaintext 
.reveal-modal {
		visibility: hidden;
		top: 50%; 
		left: 50%;
		width: 670px;
		margin-top: -200px;
		margin-left: -375px;
		background: #eee url(modal-gloss.png) no-repeat -200px -80px;
		position: fixed;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
[CSS] pobierz, plaintext 

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ć...

Ten post edytował pawel.ad 12.11.2011, 23:27:27

[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]

[HTML] pobierz, plaintext 
.reveal-modal {
		visibility: hidden;
		top: 150%; 
		left: 50%;
		margin-left: -300px;
		width: 520px;
		background: #eee url(modal-gloss.png) no-repeat -200px -80px;
		position: fixed;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
[HTML] pobierz, plaintext 

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ę
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 
    var modal = $(this),
       topMeasure  = parseInt(modal.css('top')),
	topOffset = modal.height() + topMeasure,
        locked = false,
	modalBG = $('.reveal-modal-bg');
 
...
 
	if(options.animation == "fadeAndPop") {
		modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
		modalBG.fadeIn(options.animationspeed/2);
		modal.delay(options.animationspeed/2).animate({
			"top": $(document).scrollTop()+topMeasure + 'px',
			"opacity" : 1
		}, options.animationspeed,unlockModal());					
	}
 
...
 
	if(options.animation == "fadeAndPop") {
		modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
		modal.animate({
			"top":  $(document).scrollTop()-topOffset + 'px',
			"opacity" : 0
		}, options.animationspeed/2, function() {
			modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
			unlockModal();
		});					
	}  
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował pawel.ad 13.11.2011, 02:01:02