JQuery popup modal should center

Question

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 a user clicks on an element that has a poplight class, then the above code is executed and it should display a div that has a popup_block class, but before that the ajax function is called, and I have no problem with that, but the centralism of this the div (which has the popup_block class) is lost, or it looks terribly vague, since you see that there is code that implements the centralism of this div, but it doesn’t, it only centers when I pointed to the css position or width and height of this div in css, but I don't want to do this, fun The jquery share should do this (see the code, it was implanted there). maybe there is a flaw in my code, or I just missed something, but whatever it is, I don't know. please help, I just want to focus this div on the phone. Thanks in advance.

-that div (has the popup_block class) is fixedly positioned, z-index: 99999 and does not display its defaut.

Answer 1

this can help,

  $.fn.center = function () { this.css("position","absolute"); this.css("top", ( $(window).height() - this.height() ) / 2 + "px"); this.css("left", ( $(window).width() - this.width() ) / 2 + "px"); return this; } $('.yourelement').center(); $( window ).resize(function() { $('.yourelement').center(); }); 

Answer 2

The centering of the div should be connected to the window. Here is how you can do it.

Assuming #div is the cell to be centered

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

If you have an absolute position field, use top and left instead of marginTop and marginLeft respectively.

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

Answer 3

I used the code provided in this Using jQuery to center the DIV on the screen to respond to my popup, and it worked brilliantly. You probably want to use position:absolute and top and left attributes instead of just margin-left and margin-top

Answer 4

I could not force myself to read your code, so instead you created some examples:

---

Absolute centering of fixed size elements

This style is simple. Just set the absolute position of the element, drag it to 50% / 50% and release half its width and height using negative margins.

JsFiddle example

---

Absolute centering of elements with dynamic size

This is more complicated. The best way (at least in my opinion) to do this without involving Javascript in the picture is to use tables. You can avoid the horrible table tags by using the display: table CSS style. Using tables, you can vertically and horizontally center the contents of a table cell, but first, the table should cover the entire page.

Since you cannot use position: absolute in a table, you need to provide a <div> wrapper that does this. You can then set the width and height of the table to 100% to cover the entire view port.

Finally, you put a div with a CSS style display: inline-block; so that it can be centered horizontally by the text-align style of this parent. Tadaa! This div is now fully focused no matter what.

JsFiddle example

---

Hope this helps