1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Fenêtre modale qui change de position

k_iki75
Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
21 octobre 2020
 - Modifié le 21 oct. 2020 à 19:49
Bonjour,

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;
        });
      });


Code css: 
/*POPUP*/
.conteneur {
  width:95%;
  min-width:800px;
  min-height:500px;
   background-color:#FFFFFF;
   color:#000000;
   border:1px solid #666666;
 }

.voile-noir {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  background: gray;
  z-index: 9999;
}
.popup-block{
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  z-index: 99999;
  background: #fff;
  border: 10px solid black;
  border-radius: 10px;
}
.popup p {
  padding: 5px 10px;
  margin: 5px 0;
}
.popup-light{
  color:white;
  margin-bottom:50px;
}
.popup-btn-close {
  float: right;
  margin: -55px -55px 0 0;
}