Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: centrowanie popup'a
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
GalGavu
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.
konole
Można tak: pobierasz wysokość okna przeglądarki (hbrowser), okna popup (hpopup) i teraz:

top = (hbrowser - hpopup) / 2;
GalGavu
a jakaś podpowiedź jak pobrać te dane?? Tzn. wysokość popupa i wysokość okna przeglądarki?? Popup to divClass.
pyro
  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;
GalGavu
Nie bardzo działa. Okienko gdzieś całkowicie ucieka :/
konole
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();
GalGavu
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ł smile.gif
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.