Se connecter / S'enregistrer

Résolu Problème d'affichage Popup au centre de ma fenêtre

Solutions (1)
Tags :
  • Html
  • Popup
  • CSS
|
Bonjour,

Je développe mon site personnel et j'ai un petit soucis avec l'affichage de mes popups pour la partie photo. Lorsque j'affiche la photo j'utilise l'attribut onclick avec l'appel de la fonction qui va mettre la photo dans ma popup. Le problème est qu'au premier click la popup s'affiche trop bas et au second elle est bien centrée.

JS
  1. function popup(rel, size)
  2. {
  3. var popID = rel; //Trouver la pop-up correspondante
  4. var popWidth = size; //Trouver la largeur
  5.  
  6. //Faire apparaitre la pop-up
  7. $('#' + popID).fadeIn().css({ 'width': popWidth});
  8.  
  9. //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 20px en conformité avec le CSS
  10. var popMargTop = ($('#' + popID).height()+20) / 2;
  11. var popMargLeft = ($('#' + popID).width()+20) / 2;
  12.  
  13. //Apply Margin to Popup
  14. $('#' + popID).css({
  15. 'margin-top' : -popMargTop,
  16. 'margin-left' : -popMargLeft
  17. });
  18.  
  19. //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
  20. $('body').append('<div id="fade"></div>');
  21. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  22.  
  23. return false;
  24. }


HTML :
  1. <div id="photoPopup" class="popup_block">
  2. </div>


CSS :
  1. h1#titlePopup {
  2. margin-top: -50px;
  3. color: white;
  4. text-shadow: 0px 0px 9px black;
  5. }
  6.  
  7. div#photoPopup {
  8. padding: 0px 0px 0px 0px;
  9. }
  10.  
  11. #fade { /*--Masque opaque noir de fond--*/
  12. display: none; /*--masqué par défaut--*/
  13. background: #000;
  14. position: fixed; left: 0; top: 0;
  15. width: 100%; height: 100%;
  16. opacity: .4;
  17. z-index: 9999;
  18. }
  19. .popup_block{
  20. display: none;
  21. background: #fff;
  22. padding: 20px;
  23. border: 10px solid #ddd;
  24. float: left;
  25. font-size: 1.2em;
  26. position: fixed;
  27. top: 50%;
  28. left: 50%;
  29. z-index: 99999;
  30. -webkit-box-shadow: 0px 0px 20px #000;
  31. -moz-box-shadow: 0px 0px 20px #000;
  32. box-shadow: 0px 0px 20px #000;
  33. -webkit-border-radius: 10px;
  34. -moz-border-radius: 10px;
  35. border-radius: 5px;
  36. }
  37.  
  38. /*--Gérer la position fixed pour IE6--*/
  39. *html #fade {
  40. position: absolute;
  41. }
  42. *html .popup_block {
  43. position: absolute;
  44. }


Si vous voulez voir le problème : http://manuelmenneveux.pusku.com

Si quelqu'un a une idée Merci d'avance :) 
Contenus similaires
Meilleure solution
partage
, Animateur |
Bonjour,

Dans ton fichier JS, appelle fadeIn faisant apparaitre la popup à la fin de la fonction.

function popup(rel, size)
{
var popID = rel; //Trouver la pop-up correspondante
var popWidth = size; //Trouver la largeur

//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 20px en conformité avec le CSS
var popMargTop = ($('#' + popID).height()+20) / 2;
var popMargLeft = ($('#' + popID).width()+20) / 2;

//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

//Faire apparaitre la pop-up
$('#' + popID).fadeIn().css({ 'width': popWidth});

return false;
}
  • Dreamcaster a sélectionné cette solution comme la meilleure réponse
  • Commenter cette solution |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS