Mon jQuery prend la largeur et la hauteur de l'élément avant de charger le contenu

Question

J'ai fait le script de ce centre div sur le centre de la fenêtre du navigateur, et mon problème est ici:

Le script prend une largeur et une hauteur de overlay_window avant de charger contenu, donc il centre div comme pour 1px x 1px élément, juste après cela il charge le contenu et je ne sais pas comment éviter cela.

Quelqu'un peut-il m'aider?

Voici le code:

$(document).ready(function(){  
    $('.cod').click(function() { 
     var div_name = $(this).attr('id');  
     $('.overlay_window').load('/templates/' + div_name + '_template.php'); 
     var div_width = $('#'+div_name+'-overlay').width(); 
     var div_height = $('#'+div_name+'-overlay').height(); 
     $('.overlay_window').css("width", ""+div_width+"px") 
     $('.overlay_window').css("height", ""+div_height+"px") 
     var div2_width = $('.overlay_window').width(); 
     var div2_height = $('.overlay_window').height(); 
     var window_width = $(window).width(); 
     var window_height = $(window).height();   
     var widthoffset = (window_width - div2_width)/2; 
     var heightoffset = (window_height - div2_height)/2; 
     $('.overlay_window').css("left", "" + (widthoffset-div_width) + "px"); 
     $('.overlay_window').css("top", "" + (heightoffset-div_height) + "px"); 
     $('.overlay_background').fadeIn(); 
     $('.overlay_window').fadeIn(); 
    }); 
}); 

et CSS:

div.overlay_window{ 
    background:#ffffff; 
    width:auto; 
    height:auto; 
    position:absolute; 
    z-index:200; 
    top:0; 
    left:0; 
} 

Answer 1

Apportez vos modifications de style lorsque les données sont chargées à partir .load(url, completed) fonction. Vous avez simplement demandé de charger la page et pendant le chargement, vous modifiez votre style.

$(document).ready(function(){  
    $('.cod').click(function() { 
     var div_name = $(this).attr('id'); 
     $('.overlay_window').load('/templates/' + div_name + '_template.php'**, function(){ 
      var div_width = $('#'+div_name+'-overlay').width(); 
      var div_height = $('#'+div_name+'-overlay').height(); 
      $('.overlay_window').css("width", ""+div_width+"px") 
      $('.overlay_window').css("height", ""+div_height+"px") 
      var div2_width = $('.overlay_window').width(); 
      var div2_height = $('.overlay_window').height(); 
      var window_width = $(window).width(); 
      var window_height = $(window).height(); 
      var widthoffset = (window_width - div2_width)/2; 
      var heightoffset = (window_height - div2_height)/2; 
      $('.overlay_window').css("left", "" + (widthoffset-div_width) + "px"); 
      $('.overlay_window').css("top", "" + (heightoffset-div_height) + "px"); 
      $('.overlay_background, .overlay_window').fadeIn(); 
     }); 
    }); 
    }); 

Answer 2

essayez d'écrire la fonction Click en dehors de $ (document) .ready. Si cela ne fonctionne toujours pas enferment la fonction clic au sein

$(#someID).is(:visible){ 
//your code here 
} 

ajouter id = « someID » dans votre div

choses Hope fonctionnent :)