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,
});