Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX]Popup w Jquery
Forum PHP.pl > Forum > Przedszkole
northwest
Witam serdecznie,
Kombinuję nad popupem wyskakującym w momencie wczytania strony (to mi działa nawet) - ale mam problem z wycentrowaniem go:(

Mam jquery 1.7.2 i taki kod:
  1. var id = '#dialog';
  2. //Get the screen height and width
  3. var maskHeight = jQuery(document).height();
  4. var maskWidth = jQuery(window).width();
  5.  
  6. //Set heigth and width to mask to fill up the whole screen
  7. jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
  8.  
  9. //transition effect
  10. jQuery('#mask').fadeIn(1000);
  11. jQuery('#mask').fadeTo("slow",0.8);
  12.  
  13. //Get the window height and width
  14. var winH = jQuery(window).height();
  15. var winW = jQuery(window).width();
  16.  
  17. //Set the popup window to center
  18. //jQuery(id).css('top', winH/2-$(id).height()/2);
  19. //jQuery(id).css('left', winW/2-$(id).width()/2);
  20. //transition effect
  21. jQuery(id).fadeIn(2000);
  22.  
  23. //if close button is clicked
  24. jQuery('.window .close').click(function (e) {
  25. //Cancel the link behavior
  26. e.preventDefault();
  27.  
  28. jQuery('#mask').hide();
  29. jQuery('.window').hide();
  30. });
  31.  
  32. //if mask is clicked
  33. jQuery('#mask').click(function () {
  34. jQuery(this).hide();
  35. jQuery('.window').hide();
  36. });


Ten parametr od centrowania nie chce mi działać:
jQuery(id).css('top', winH/2-$(id).height()/2);
jQuery(id).css('left', winW/2-$(id).width()/2);

Wiecie może dlaczego?

Northwest

mam taki css:
  1. #mask {
  2. position:absolute;
  3. left:0;
  4. top:0;
  5. z-index:9000;
  6. background-color:#000;
  7. display:none;
  8. }
  9. #boxes .window {
  10. position:absolute;
  11. left:0;
  12. top:0;
  13. width:440px;
  14. height:200px;
  15. display:none;
  16. z-index:9999;
  17. padding:20px;
  18. }
  19. #boxes #dialog {
  20. width:375px;
  21. height:203px;
  22. padding:10px;
  23. background-color:#ffffff;
  24. }
tolomei
Witaj.

Wrzuć cały kod na jsfiddle.net razem z HTML-em, zapisz i wrzuć link tutaj.

Pozdrawiam.
toffiak
Zgadywałem co do kodu html

http://jsfiddle.net/3QURt/12/
Gość
Mozesz wykorzystac gotowca. http://jqueryui.com/demos/dialog/
northwest
kurcze, dalej nie działa sad.gif ALe generalnie o to o czym piszesz, o to mi chodzi smile.gif
jQuery(id).css('top', winH/2-$(id).height()/2);
jQuery(id).css('left', winW/2-$(id).width()/2);

to mi wyrzuca błąd:
  1. $ is not a function
  2. jQuery(id).css('top', winH/2-$(id).height()/2);


co tutaj jest nie tak??sad.gif
boro11
Nie wiem czy Cię zadowoli inne rozwiązanie, ale ja robiłem ostatnio coś podobnego i problem rozwiązałem tak:

Użyłem highslide (http://highslide.com)

Jest to bardzo prosty generator popopów "ala lightbox", które mogą zawierać praktycznie wszystko od zdjęci, przez html'a do ajax'a, iframów i kodu php.

Reasumując ja uzyłem akurat kod na iframe, ale wszystkie działają podobnie.

Żeby okienko ładowało się samo przy otwarciu strony musisz dodać do sekcji head następujący kod:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('#idlinku').trigger("click");
  4. });
  5. </script>



Wygląda to mniej więcej tak:
http://refbackbank.com/dev/iframe.php

Wygląd i zawartość można oczywiście dowolnie modyfikować smile.gif
northwest
kurcze,a na ten mój kod nie macie pomysłu??:/
tolomei
Kolega toffiak wrzucił Twój kod.
Jak dla mnie to okienko jest centralnie na środku.

W czym problem ?

Twój kod prawdopodobnie pochodzi z tej strony -> http://www.queness.com/post/77/simple-jque...window-tutorial

Na demie okienko pojawia się także na środku.
northwest
wyrzuca mi błąd przy tym:
jQuery(id).css('top', winH/2-$(id).height()/2);
jQuery(id).css('left', winW/2-$(id).width()/2);

$ is not a function
jQuery(id).css('top', winH/2-$(id).height()/2);


mam jquery 1.7.2 :/
tylko o to mi chodzi smile.gif
tolomei
  1. jQuery(id).css('top', winH/2-jQuery(id).height()/2);
  2. jQuery(id).css('left', winW/2-jQuery(id).width()/2);
northwest
działa,dzięki:)
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.