J'ai crée une fenêtre modale (grâce à un tuto) et elle marche très bien mais je me suis rendu compte que si je l'ouvre et je la ferme plusieurs fois sans actualiser ma page elle change de place. J'ai été voir dans la fenêtre d'inspection du navigateur et en effet a chaque ouverture et fermeture ses marges changent. Auriez-vous une solution svp. je vous mets le code en dessous.
Merci
Code html:
//Bouton d'ouverture de la fenêtre modale
<button type="button" name="button" class="btn btn-outline-light marg-offre"><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">En savoir plus</a></button>
//Fenêtre modale
<section class=" row popup-block black">
<div class="col-lg-12" >
<h3>Titre popup</h3>
<p>Texte dans la popup</p>
</div>
</section>
</div>
code JQuery :
$(function(){
$(".popup-light").click(function(){
var obj = $(this),
popupClass = obj.data("popupClass"),
popupWidth = obj.data("popupWidth"),
objPopup = $('.' + popupClass);
objPopup
.css("width", popupWidth)
.prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
.css({
// Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
// Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
"margin-top": -objPopup.outerHeight(true)/2,
"margin-left": -objPopup.outerWidth(true)/2
})
.fadeIn();
$("<div/>", {
"class":"voile-noir",
"css":{
"filter":"alpha(opacity=80)"
}
}).appendTo("body").fadeIn();
return false;
});
$("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
$('.voile-noir , .popup-block').fadeOut(function(){
$(".popup-btn-close, .voile-noir").remove();
});
return false;
});
});