Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> centrowanie popup'a
GalGavu
post
Post #1





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 27.02.2010

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


Hej.
Mam problem z wycentrowaniem popup'a. Mianowicie to co próbuję zrobić na razie to tyle:
styl popup'a:
  1. visibility: hidden;
  2. margin-left: -300px;
  3. width: 520px;
  4. background: #eee url(../img/misc/modal-gloss.png) no-repeat -200px -80px;
  5. z-index: 1002;
  6. padding: 30px 40px 34px;
  7. -moz-border-radius: 5px;
  8. -webkit-border-radius: 5px;
  9. border-radius: 5px;
  10. -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
  11. -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
  12. -box-shadow: 0 0 10px rgba(0,0,0,.4);

Jak go próbuję centrować:
  1. $( divClass ).css({
  2. display: 'block',
  3. position: 'fixed',
  4. left: '50%',
  5. top: NIEWIEM :)
  6. });
  7.  
  8. No i właśnie nie wiem co w top wstawić aby poprawnie centrowało mi w pionie. W poziomie jest ok.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 6)
konole
post
Post #2





Grupa: Zarejestrowani
Postów: 275
Pomógł: 32
Dołączył: 21.03.2006
Skąd: Warszawa

Ostrzeżenie: (20%)
X----


Można tak: pobierasz wysokość okna przeglądarki (hbrowser), okna popup (hpopup) i teraz:

top = (hbrowser - hpopup) / 2;
Go to the top of the page
+Quote Post
GalGavu
post
Post #3





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 27.02.2010

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


a jakaś podpowiedź jak pobrać te dane?? Tzn. wysokość popupa i wysokość okna przeglądarki?? Popup to divClass.
Go to the top of the page
+Quote Post
pyro
post
Post #4





Grupa: Zarejestrowani
Postów: 2 148
Pomógł: 230
Dołączył: 26.03.2008

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


  1. #popUp {
  2. position: fixed;
  3. left: 50%;
  4. top: 50%;
  5. width: 520px;
  6. margin-left: -260px;
  7. min-height: 400px; /* przykładowo */
  8. margin-top: -200px;
  9. z-index: 999;
  10. display: none;
  11. }


a żeby wyświetlić potem tego pop-upa wystarczy zwykłe display: block;
Go to the top of the page
+Quote Post
GalGavu
post
Post #5





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 27.02.2010

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


Nie bardzo działa. Okienko gdzieś całkowicie ucieka :/
Go to the top of the page
+Quote Post
konole
post
Post #6





Grupa: Zarejestrowani
Postów: 275
Pomógł: 32
Dołączył: 21.03.2006
Skąd: Warszawa

Ostrzeżenie: (20%)
X----


Cytat(GalGavu @ 13.08.2011, 10:54:17 ) *
a jakaś podpowiedź jak pobrać te dane?? Tzn. wysokość popupa i wysokość okna przeglądarki?? Popup to divClass.


  1. popupHeight = $('.divClass').height()
  2. browserHeight = $(window).height();
Go to the top of the page
+Quote Post
GalGavu
post
Post #7





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 27.02.2010

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


Rozwiązałem problem ale był potrzebny !important.
Trochę dziwna sprawa się pojawiło bo firebug twierdzi, że istnieje emelent .style (czyli z tego co wyczytałem to tak jakbym wstawiał styl inline w div'a czego oczywiście nie robiłem). Przez to jakieś dziwne wartości mi top wychodziły i tak straciłem kilka godzin bo myślałem, że gdzieś to znajdę. W końcu wstawiłem dla top i left !important i zadziałało. Aczkolwiek dalej jestem ciekaw jak mi się z nieba ten inline wstawił (IMG:style_emoticons/default/smile.gif)
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: 9.10.2025 - 11:29