Comment activer le défilement du contenu dans un modal Bootstrap?

J’essaie d’intégrer beaucoup de texte dans une boîte modale créée à l’aide de Twitter Bootstrap, mais j’ai un problème: le contenu refuse de défiler. J’ai essayé d’append un overflow:scroll et overflow-y:scroll mais sans succès; cela provoque simplement l’affichage d’une barre de défilement sans activer le défilement.

Quelle est la cause derrière cela et que puis-je faire?

Dans Bootstrap.css, changez l’atsortingbut d’arrière-plan ( position ) de Modal de fixed à absolute

Dans Bootstrap 3, vous devez changer la classe css .modal

avant:

 .modal { overflow-y: auto; } 

après:

 .modal { overflow-y: scroll; } 

Cette réponse comporte en réalité deux parties, un avertissement UX et une solution réelle .

Avertissement UX

Si votre modal contient tellement de choses qu’il doit faire défiler, demandez-vous si vous devriez utiliser un modal. La taille du modal bootstrap par défaut est une très bonne contrainte sur la quantité d’informations visuelles à adapter. Selon ce que vous faites, vous pouvez plutôt opter pour une nouvelle page ou un assistant.

Solution actuelle

Est ici: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Cette solution vous permettra également de modifier la hauteur de .modal et de faire en .modal-body l’espace restant avec une barre de défilement verticale si nécessaire.

METTRE À JOUR

Notez que dans Bootstrap 3, le modal a été refait pour mieux gérer le contenu débordant. Vous serez en mesure de faire défiler le modal lui-même vers le haut et vers le bas pendant qu’il circule sous la fenêtre.

Si je me souviens bien, le paramétrage du débordement: caché sur le corps ne fonctionnait pas sur tous les navigateurs que je testais pour une bibliothèque modale que j’avais construite pour un site mobile. Plus précisément, j’ai eu du mal à empêcher le corps de défiler en plus du défilement modal, même lorsque je mettais un débordement: caché sur le corps.

Pour mon site actuel, j’ai fini par faire quelque chose comme ça. Il stocke simplement votre position de défilement actuelle en plus de définir le “débordement” sur “caché” sur le corps de la page, puis restaure la position de défilement après la fermeture du modal. Il y a une condition là où un autre modal bootstrap s’ouvre alors qu’un autre est déjà actif. Sinon, le rest du code devrait être explicite. Notez que si le débordement: masqué sur le corps n’empêche pas la fenêtre de défiler pour un navigateur donné, cela définit au moins l’emplacement de défilement d’origine à la sortie.

 function bindBootstrapModalEvents() { var $body = $('body'), curPos = 0, isOpened = false, isOpenedTwice = false; $body.off('shown.bs.modal hidden.bs.modal', '.modal'); $body.on('shown.bs.modal', '.modal', function () { if (isOpened) { isOpenedTwice = true; } else { isOpened = true; curPos = $(window).scrollTop(); $body.css('overflow', 'hidden'); } }); $body.on('hidden.bs.modal', '.modal', function () { if (!isOpenedTwice) { $(window).scrollTop(curPos); $body.css('overflow', 'visible'); isOpened = false; } isOpenedTwice = false; }); } 

Si vous n’aimez pas cela, l’autre option serait d’affecter une hauteur maximale et un débordement: auto à .modal-body comme ceci:

 .modal-body { max-height:300px; overflow:auto; } 

Dans ce cas, vous pouvez configurer la hauteur maximale pour différentes tailles d’écran et laisser le débordement: auto pour différentes tailles d’écran. Vous devez cependant vous assurer que l’en-tête, le pied de page et le corps modaux ne représentent pas plus que la taille de l’écran. J’inclurais donc cette partie dans vos calculs.

Définissez la hauteur pour le modal-body et non pour l’ensemble du modal afin d’obtenir un défilement parfait sur la superposition modale. Je le fais fonctionner comme ceci:

 .MyModal { height: 450px; overflow-y: auto; } 

Ici, vous pouvez définir la hauteur selon vos besoins.

C’est comme ça que je l’ai fait uniquement avec les CSS remplaçant certaines classes:

 .modal { height: 60%; .modal-body { height: 80%; overflow-y: scroll; } } 

J’espère que ça vous aide.

Lorsque vous utilisez le modal Bootstrap avec skrollr, le modal ne sera plus défilable.

Problème résolu avec l’arrêt de la propagation de l’événement tactile.

 $('#modalFooter').on('touchstart touchmove touchend', function(e) { e.stopPropagation(); }); 

plus de détails à Ajouter un événement de défilement à l’élément dans # skrollr-body

En fait, pour Bootstrap 3, vous devez également remplacer la classe .modal-open sur le corps.

  body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 15px; /*< -- to margin-right: 0px;*/ } 

J’ai ce problème sur Mobile Safari sur mon iPhone6

Bootstrap ajoute la classe .modal-open au corps quand un modal est ouvert.

J’ai essayé de faire des modifications minimales à Bootstrap 3.2.0 et j’ai proposé les éléments suivants:

 .modal-open { position: fixed; } .modal { overflow-y: auto; } 

Pour comparaison, j’ai inclus les styles Bootstrap associés ci-dessous.

Extrait sélectionné de bootstrap / less / modals.less (n’incluez pas ceci dans votre correctif):

 // Kill the scroll on the body .modal-open { overflow: hidden; } // Container that the modal scrolls within .modal { display: none; overflow: hidden; position: fixed; -webkit-overflow-scrolling: touch; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } 

Version Mobile Safari utilisée: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

J’ai eu le même problème et j’ai trouvé un correctif comme ci-dessous:

 $('.yourModalClassOr#ID').on('shown.bs.modal', function (e) { $(' yourModalClassOr#ID ').css("max-height", $(window).height()); $(' yourModalClassOr#ID ').css("overflow-y", "scroll"); /*Important*/ $(' yourModalClassOr#ID ').modal('handleUpdate'); }); 

100% de travail

 .modal-body { max-height: 80vh; overflow-y: scroll; } 

ça marche pour moi

Après avoir utilisé toutes les solutions mentionnées, je n’étais toujours pas en mesure de faire défiler avec le défilement de la souris, le bouton haut / bas du clavier fonctionnait pour faire défiler le contenu.

Donc, j’ai ajouté ci-dessous des correctifs CSS pour le faire fonctionner

 .modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; **pointer-events: auto;** } 

Ajout d’un pointeur-événements: auto; pour le faire défiler avec la souris.

J’ai été capable de surmonter cela en utilisant la mésortingque “vh” avec max-height sur l’élément .modal-body. 70vh a regardé de près pour mes utilisations.

 .modal-body { overflow-y: auto; max-height: 70vh; } 

Bootstrap ajoute ou supprime un script "modal-open" à la lorsque nous ouvrons ou fermons un modal. Donc, si vous ouvrez plusieurs modaux et que vous en fermez un, le CSS modal-open sera supprimé de la balise body.

Mais l’effet de défilement dépend de l’atsortingbut "overflow-y: auto;" défini en modal-open

Solution 1 : Vous pouvez déclarer .modal{ overflow-y:auto} ou .modal-open .modal{ overflow-y:auto} si vous utilisez moins de 3v de bootstrap (pour les versions supérieures, il est déjà déclaré).

Bootstrap ajoute modal-open classe modal-open au body afin de supprimer les barres de défilement au cas où modal est affiché, mais n’ajoute aucune classe au html qui peut aussi avoir des barres de défilement, par conséquent la barre de défilement de html peut parfois être visible aussi, pour la supprimer définir les événements de show / hide modaux et append / supprimer le overflow:hidden sur le html . Voici comment faire cela.

 $('.modal').on('hidden.bs.modal', function () { $('html').css('overflow','auto'); }).on('shown.bs.modal', function () { $('html').css('overflow','hidden'); }); 

Solution 2 : Comme le modal a des clés de fonctionnalité, la meilleure façon de le gérer est de fixer la hauteur de ce dernier ou même de mieux la connecter, comme ceci –

 .modal-body { overflow:auto; max-height: 65vh; } 

Avec cette méthode, vous n’avez pas non plus à gérer body barres de défilement du body et du html .

Note 1 : Support du navigateur pour les unités vh .

Note 2 : Tel que proposé ci-dessus . Si vous modifiez .modal{position:fixed} en .modal{position:absolute} , mais que si la page a plus de hauteur que l’utilisateur modal peut trop en faire défiler et que modal disparaîtra de viewport, ce n’est pas bon pour l’expérience utilisateur.