Popup w Jquery


(northwest) #1

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:

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();

                });

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


(Pablo_Wawa) #2

A ten element ma pozycjonowanie absolutne (CSS)?


(northwest) #3

mam taki css:

#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;

}

(batmomobil) #4
#mask {margin: 0;

  padding: 0;

}