May 6, 2012

Jquery popup modal must center

Question by user1292042

Ok i have this code:

    //When you click on a link with class of poplight and the href starts with  a # 
$('a.poplight[href^=#]').click(function() {
var a = $(this).attr('vd');
var b = $(this).attr('id');

    $.post('chk.php', { name : a, name2 : b }, function(output) {
    $('#con').html(output).show();
});

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a     href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');



    //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup

    $('#' + popID).css({ 

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });

    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 



    return false;

});


//Close Popups and Fade Layer

$('a.close').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block, .login').fadeOut(function() {
    $('#fade').remove();

}); //fade them both out



    return false;

});
//end poup

now, whenever the user clicked on the element which has a class of poplight then the above code is executed and it should display the div that has the class of popup_block but before that an ajax function is called and i dont have problem with that but the centerialism of that div(which has the class of a popup_block) is lost, or its appear awfully uncetered as u see that there is a code there that implement the centerialism of that div but it doesnt, its only centered when i specified the position on css or the width and height of that div on the css but i dont want to do that, the jquery function should do that (see code, its been implented there). maybe there is a lack in my code or i just miss something but whatever is that, i dont know. please help, i just want to center that div upon call.thank you in advance.

-that div(has a class of popup_block) is fixed positioned, z-index:99999 and display none by defaut.

Answer by Starx

Centering a div has to be with respect with the window. Here is how you can do that.

Assuming #div is the box to be centered

$("#div").css({
    marginTop : ($(window).height() - $(this).height())/2,
    marginLeft : ($(window).width() - $(this).width())/2,
});

In case you have a absolute position box, then use top and left instead of marginTop and marginLeft respectively.

$("#div").css({
    top : ($(window).height() - $(this).height())/2,
    left : ($(window).width() - $(this).width())/2,
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!