[AJAX]Popup w Jquery Opcje

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

[PHP] pobierz, plaintext 
var id = '#dialog';
                //Get the screen height and width
                var maskHeight = jQuery(document).height();
                var maskWidth = jQuery(window).width();
 
                //Set heigth and width to mask to fill up the whole screen
                jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
 
                //transition effect		
                jQuery('#mask').fadeIn(1000);	
                jQuery('#mask').fadeTo("slow",0.8);	
 
                //Get the window height and width
                var winH = jQuery(window).height();
                var winW = jQuery(window).width();
 
                //Set the popup window to center
                //jQuery(id).css('top',  winH/2-$(id).height()/2);
                //jQuery(id).css('left', winW/2-$(id).width()/2);
                //transition effect
                jQuery(id).fadeIn(2000); 	
 
                //if close button is clicked
                jQuery('.window .close').click(function (e) {
                    //Cancel the link behavior
                    e.preventDefault();
 
                    jQuery('#mask').hide();
                    jQuery('.window').hide();
                });		
 
                //if mask is clicked
                jQuery('#mask').click(function () {
                    jQuery(this).hide();
                    jQuery('.window').hide();
                });
[PHP] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
}  
#boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
}
#boxes #dialog {
    width:375px; 
    height:203px;
    padding:10px;
    background-color:#ffffff;
}
[HTML] pobierz, plaintext 

[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 ALe generalnie o to o czym piszesz, o to mi chodzi
jQuery(id).css('top', winH/2-$(id).height()/2);
jQuery(id).css('left', winW/2-$(id).width()/2);

to mi wyrzuca błąd:

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

co tutaj jest nie tak??

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

[PHP] pobierz, plaintext 
	<script type="text/javascript">
		$(document).ready(function() {
		$('#idlinku').trigger("click");
		});
	</script>
[PHP] pobierz, plaintext 

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

Wygląd i zawartość można oczywiście dowolnie modyfikować

Ten post edytował boro11 12.04.2012, 21:57:18

[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

[tolomei]

[PHP] pobierz, plaintext 
jQuery(id).css('top', winH/2-jQuery(id).height()/2);
jQuery(id).css('left', winW/2-jQuery(id).width()/2);
[PHP] pobierz, plaintext 

[northwest]

działa,dzięki:)