5546 sujets

Sémantique web et HTML

[Résolu] Problème de décalage à la fermeture d'une fenêtre Modal

Bonjour à tous,

voici mon problème, si quelqu'un à une idée je suis preneur Smiley smile

Je suis sur la création d'un site web, et sur certaines pages, là ou je met des call to action qui ouvre un "pop up modal", lors de la fermeture de ce dernier... tous le site se décale sur la gauche...... autant de fois que j'ouvre et referme la fenêtre

voici le lien d'une des pages qui pose problème :
http://les-petits-dejeuners-de-la-fashiontech.fr/paris/equipe.html

Une idée ?
Modifié par CrazyDoke (24 Jun 2020 - 14:28)
Modérateur
Salut,

A chaque fois que tu ouvre la popup il y a un script qui enlève le scroll de ta page (pour que tu ne puisse pas scroller alors que tu es sur la page. Il rajoute un padding right de 17px en dur sur le body pour compenser la disparition du scroll. Sauf que ton script n’enlève pas ces 17px une fois la popup fermée. Pire, il rajoute 17px a chaque fois plutot que d'overrider. Docn plus tu ouvre plus ca décale.

<body class="" style="padding-right: 17px;">
Merci beaucoup, en effet c'est problématique Smiley eek
Est ce que c'est trop te demandé si tu as pu voir dans quel script se situé l'erreur, car je n'arrive pas à la trouver Smiley rolleyes ?
Modérateur
Je pense que c'est dans bootstrap :

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    this.originalBodyPad = document.body.style.paddingRight || ''
    var scrollbarWidth = this.scrollbarWidth
    if (this.bodyIsOverflowing) {
      this.$body.css('padding-right', bodyPad + scrollbarWidth)
      $(this.fixedContent).each(function (index, element) {
        var actualPadding = element.style.paddingRight
        var calculatedPadding = $(element).css('padding-right')
        $(element)
          .data('padding-right', actualPadding)
          .css('padding-right', parseFloat(calculatedPadding) + scrollbarWidth + 'px')
      })
    }
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', this.originalBodyPad)
    $(this.fixedContent).each(function (index, element) {
      var padding = $(element).data('padding-right')
      $(element).removeData('padding-right')
      element.style.paddingRight = padding ? padding : ''
    })
  }


Étrange qu'il ne l'enlève pas... tu as fait quelque-chose pour l'activer ? Des options ?
Enorme merci pour tes retours Smiley smile

Problème réglé...

Sans trop m'avancé car je suis novice en .js, le problème venait sûrement du fait que dreamweaver m'installe automatiquement une librairie bootstrap (css, js, font....) :
<script src="lib/jquery/jquery.min.js"></script>


et que pour le pop-up modal je me suis servi d'un bout de code de chez CodePen faisant appel au même fonction mais avec un lien externe vers un script jquery.min.js

du coup je pense que le doublon n'était pas très apprécié par le site Smiley rolleyes Smiley rolleyes
Meilleure solution
Sujet clos
Aller à