Comment cacher le corps de la barre de défilement lors de la démonstration de dialogue modale?

Ma page d'accueil a beaucoup de contenu. Lorsque je crée aucune boîte de dialogue modale, le contenu du corps de la barre de défilement est visible et lorsque nous défiler, il fait défiler vers le bas de la page.

Dans la boîte de dialogue j'ai aussi d'afficher beaucoup de contenu. Donc, si je peux me cacher le corps de la barre de défilement et de montrer uniquement modal de la barre de défilement de moyens, ce serait une belle expérience de l'utilisateur.

L'idée est que, lors de l'affichage d'une boîte de dialogue modale et certains contenu défilant sur le dessus pour désactiver la page principale de la barre de défilement et afficher uniquement la barre de défilement pour actuellement visible modal div.

Que dois-je faire pour cacher le contenu du corps de la barre de défilement et de montrer une modale des div.

Mon côté client est plein de JavaScript & jQuery.

Toutes les suggestions seront reconnaissants!

Je pense que tu veux dire modale boîte de dialogue... 🙂

OriginalL'auteur | 2011-03-13

  1. 19

    Ajouter $('body').css('overflow','hidden') à votre fonction qui affiche le modal, et $('body').css('overflow','scroll') à votre fonction qui ferme le modal.

    Cela ne fonctionnera pas dans IE7, sans réglage de la hauteur du corps. Pas sûr que sur les autres versions de IE.
    $('body').css('overflow', 'inherit') sur fermer, peut-être un peu mieux.
    Et le mieux est d'utiliser $('body').css('overflow', '') 🙂
    Ne fonctionne pas sur IE11 avec jQuery 1.7.1...
    Ne fonctionne pas pour moi sur Chrome pour Mac.

    OriginalL'auteur mVChr

  2. 2

    Lorsque j'ai utilisé $('body').css('overflow','scroll') ou $('body').css('overflow', 'inherit') la barre de défilement ne semble pas à le coin supérieur droit de la fenêtre du navigateur, mais sur le bord de la page contenant...

    Je sais que cette question à cause de la mise en page et les styles css du site en particulier, mais dans ce cas, de changer le style de la balise html semble être la plus universelle:

    • $('html').css('overflow','hidden'); - masquer la barre de défilement
    • $('html').css('overflow','scroll'); - afficher la barre de défilement

    OriginalL'auteur SleepWalker

  3. 1

    Si vous envelopper l'ensemble de votre corps contenu dans une enveloppe div avec overflow: hidden vous pouvez définir dynamiquement la hauteur de la div égale à la hauteur de la fenêtre d'affichage lorsque vous ouvrez votre boîte de dialogue modale.

    OriginalL'auteur Bryan Downing

  4. 0

    vous pouvez ajouter ce dans bootstrap.js

    Ligne:421

      this.$element.hide(), this.backdrop(function() {
  a.$body.removeClass("modal-open"),$('html').css('overflow','scroll'), a.resetAdjustments(), a.resetScrollbar(), a.$element.trigger("hidden.bs.modal")
})

    Ligne:397

    this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $('html').css('overflow','hidden'), this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function()

    Les numéros de ligne ne sont pas va être utile que les modifications du code. Avoir un peu de contexte (lignes avant/après), permettrait de beaucoup plus, je pense.

    OriginalL'auteur Hugo Balboa