title: Jquery popup modal must center
body: <p>Ok i have this code:</p>
  
  <pre><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 &amp; Variables from href URL
  
      var query= popURL.split('?');
  
      var dim= query[1].split('&amp;');
  
      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('&lt;a     href="#" class="close"&gt;&lt;img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;');
  
  
  
      //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('&lt;div id="fade"&gt;&lt;/div&gt;'); //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
  </code></pre>
  
  <p>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.</p>
  
  <p>-that div(has a class of popup_block) is fixed positioned, z-index:99999 and display none by defaut. </p>