I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap, but I'm having a problem: that content refuses to scroll.
I tried adding overflow:scroll and overflow-y:scroll , but to no avail; that merely causes it to display a scroll bar without actually enabling the scrolling.
What's the cause behind that and what can I do?
A colleague kindly suggested to look for body and replace it with html . This fixed the problem for us.
16 Answers 16
In Bootstrap.css change the background attribute ( position ) of Modal from fixed to absolute
This actually causes the modal content to be cut off for me. Setting $.support.transition = false instead makes the scrolling work as expected, but then there are no transitions :-/
This solution is a problem if your page has scrolling. The modal may be out of view with absolute positioning
In Bootstrap 3 you have to change the css class .modal
before (bootstrap default) :
after (after you edit it):
They are quite different. The first one uses the auto-value, the second one uses the scroll-value. This fixed for me the issue.
"Before" means which css the .modal class had before editing. The "after" section shows the correct way to override the .modal class.
This answer actually has two parts, a UX warning, and an actual solution.
UX Warning
If your modal contains so much that it needs to scroll, ask yourself if you should be using a modal at all. The size of the bootstrap modal by default is a pretty good constraint on how much visual information should fit. Depending on what you're making, you may instead want to opt for a new page or a wizard.
Actual Solution
This solution will also allow you to change the height of .modal and have the .modal-body take up the remaining space with a vertical scrollbar if necessary.
UPDATE
Note that in Bootstrap 3, the modal has been refactored to better handle overflowing content. You'll be able to scroll the modal itself up and down as it flows under the viewport.
I'm having the same problem, and this doesn't work on mobile devices, as it relies on a pixel height.
hmm.. hard to test this answer, as the linked fiddle doesn't use bootstrap at all… this may explain some of the principles at work, but the bootstrap source is so convoluted that I don't think it's so useful without applying the principles to default BS markup.
This may be out of date for the latest version of bootstrap, but in the case of the fiddle I provided, bootstrap is just the code that goes around this, you shouldn't need to modify anything within bootstrap itself, just the element that contains the content you wish to scroll.
I could argue that the scrolling modal is a UX design warning. Consider a simple modal that displays a list-group allowing the user to select one of 10 options shown on a mobile in landscape, a nicer solution would be to have the modal-content scroll, though I haven't seen a universal solution that works well on all devices.
Set height for modal-body and not for the whole modal to get a perfect scroll on modal overlay. I get it work like this:
Here you can set height as per your requirements.
Finally, a solution! A note for dynamic modals- height: auto; also works, but modal height is set to auto anyway, so really all you need is the overflow-y: auto; . I also applied it to the .modal instead of selecting a specific one. Extensive testing shows that it has worked on every modal so far.
This is how I did it purely with CSS overriding some classes:
Hope it helps you.
If I recall correctly, setting overflow:hidden on the body didn't work on all the browsers I was testing for a modal library I built for a mobile site. Specifically, I had trouble with preventing the body from scrolling in addition to the modal scrolling even when I put overflow:hidden on the body.
For my current site, I ended up doing something like this. It basically just stores your current scroll position in addition to setting "overflow" to "hidden" on the page body, then restores the scroll position after the modal closes. There's a condition in there for when another bootstrap modal opens while one is already active. Otherwise, the rest of the code should be self explanatory. Note that if the overflow:hidden on the body doesn't prevent the window from scrolling for a given browser, this at least sets the original scroll location back upon exit.
If you don't like this, the other option would be to assign a max-height and overflow:auto to .modal-body like so:
For this case, you could configure the max-height for different screen sizes and leave the overflow:auto for different screen sizes. You would have to make sure that the modal header, footer, and body don't add up to more than the screen size, though, so I would include that part in your calculations.
Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.
В итоге было задумано сделать собственное простое решение.
Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:
Arctic Modal,
jquery-modal,
iziModal,
Micromodal.js,
tingle.js,
Bootstrap Modal (из библиотеки Bootstrap) и др.
(в статье не рассматриваем решения на базе Frontend-фреймворков)
Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.
Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».
Итак, чтобы нам хотелось видеть?
Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.
Начнём с разметки.
1. Разметка HTML и CSS
1.1. Каркас модальных окон
Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.
Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):
Сделаем так, чтобы .hystmodal растягивался на всё окно браузера и закрывал собой содержимое страницы. Чтобы этого добиться, установим фиксированное позиционирование в CSS и приравняем свойства top, bottom, left и right к нулю.
В этом коде сделаны ещё две вещи:
Так как мы хотим центрировать окно внутри страницы, превращаем .hystmodal в flex-контейнер с выравниваем его потомков по центру по вертикали и горизонтали.
Окно может быть больше высоты экрана браузера, поэтому мы устанавливаем overflow-y: auto , чтобы при переполнении возникала полоса прокрутки. Также, для сенсорных экранов (в основном для Safari) нам стоит установить свойство -webkit-overflow-scrolling: touch , чтобы сенсорная прокрутка работала именно на этом блоке а не на странице.
Теперь установим стили для самого окна.
Кажется возникли сложности.
Проблема №1. Если высота окна больше высоты окна браузера, то контент окна будет обрезан сверху.
Это возникает из-за свойства justify-content: center . Оно позволяет нам удобно выровнять потомков по основной оси (по вертикали), но если потомок становится больше родителя то часть его становится недоступной даже при прокручиваемом контейнере. Подробнее можно посмотреть на stackoverflow. Решение – установить justify-content: flex-start , а потомку установить margin:auto . Это выровняет его по центру.
Проблема №2. В ie-11 если высота окна больше высоты окна браузера, то фон окна обрезается.
Решение: мы можем установить flex-shrink:0 потомку – тогда обрезки не происходит.
Проблема №3. В браузерах кроме Chrome нет отступа от нижней границы окна (т.е. padding-bottom не сработал).
Сложно сказать баг это браузеров или наоборот соответствует спецификации, но решения два:
установить псевдоэлемент ::after после потомка и дать ему высоту вместо padding
обернуть элемент в дополнительный блок и дать отступы уже ему.
Воспользуемся вторым методом. Добавим обертку .hystmodal__wrap . Так мы заодно обойдём и проблему №1, а вместо padding у родителя установим margin-top и margin-top у самого .hystmodal__window .
Наш итоговый html:
В код также добавлены некоторые aria и role атрибуты для обеспечения доступности.
Обновленный код CSS для обертки и окна.
1.2 Скрываем окно
Сейчас наше окно всегда видно. Когда говорят о скрытии элементов, первое что приходит на ум это переключать свойство display со значения none до нашего значения flex.
Но этот подход нас не устроит, ведь свойство display не анимируется. Все переходы дочерних элементов, указанные в свойстве transition, работать не будут.
Нам поможет другое свойство visibility:hidden . Оно скроет окно визуально, хотя и зарезервирует под него место. А так как все будущие окна на странице имеют фиксированное позиционирование – они будут полностью скрыты и не повлияют на остальную страницу. Кроме того, на элементы с visibility:hidden нельзя установить фокус с клавиатуры, а от скрин-ридеров мы уже скрыли окна с помощью атрибута aria-hidden="true" .
Добавим также классы для открытого окна:
1.3 Оформление подложки
В лучшем случае, нам нужен отдельный html-элемент в качестве оверлея. Можно использовать и имеющийся элемент модального окна .hystmodal в качестве оверлея, но тогда анимация на этом элементе (например переход opacity) будет затрагивать и внутренние элементы. В итоге, не получится анимировать разные свойства для окна и оверлея отдельно.
Просто разместим элемент .hystmodal__shadow прямо перед закрывающим
. В будущем, сделаем так, чтобы этот элемент создавался автоматически из js при инициализации библиотеки.
1.4 Отключение прокрутки страницы
Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась. Самый простой способ этого добиться — повесить overflow:hidden для body или html, когда окно открывается. Однако с этим есть проблема:
Проблема №4. В браузере Safari на iOS страница будет прокручиваться, даже если на тег html или body повешен overflow:hidden . Решается двумя способами, либо блокированием событий прокрутки (touchmove, touchend или touchsart) из js вида:
Однако при этом блокируется и прокрутка самого модального окна, а также все прокручиваемые блоки внутри окна, если они будут. Требуется дополнительные проверки селекторов из js, что приводит к усложнению кода, поэтому рассмотрим другой вариант.
ps: можно конечно применить библиотеку scroll-lock, в которую заложено это решение, но в статье было решено воспользоваться другим вариантом.
Другое решение – основано частично на CSS. Пусть когда окно открывается, на элемент будет добавляться класс .hystmodal__opened :
Благодаря position:fixed , окно не будет прокручиваться даже в safari, однако здесь тоже не всё гладко:
Проблема №5. При открытии/закрытии окна страница прокручивается в начало. Действительно, это происходит из-за изменения свойства position, текущая прокрутка окна сбрасывается.
Для решения, нам нужно написать следующий JS (упрощенно):
При открытии:
При закрытии:
Отлично, приступим к JavaScript коду.
2. Код JavaScript
2.2 Каркас библиотеки
Нам нужна совместимость со старыми браузерами включая IE11 поэтому нам нужно выбрать из 2 вариантов кодинга:
Разрабатывать на старом стандарте ES5, и использовать только те фичи, которые поддерживают все браузеры.
Применить современный синтаксис ES6, но подключить транспайлер Babel, который автоматически преобразует код для всех браузеров и встроит необходимые полифилы. Было принято решение использовать второй вариант, с прицелом на будущее. Приступим.
Основа нашей библиотеки единственный класс HystModal . Ниже я приведу скелет кода с комментариями, а потом добавим остальной функционал.
Итак, мы описали класс HystModal . Чтобы всё работало, нужно всего лишь подключить наш скрипт и создать экземпляр класса:
Проблема №6: если в браузере есть фиксированный скроллбар (который влияет на ширину страницы), то при открытии/закрытии окна происходит сдвиг контента, когда полоса прокрутки то появляется то пропадает.
Действительно – скроллбар пропадает и контент страницы перераспределяется. Чтобы решить эту проблему, можно добавить отступ справа к тегу html, равный ширине скроллбара когда он пропадает.
Однако ширина скроллбара может быть разной в разных браузерах и операционных системах. Кроме того, скроллбара может не быть на коротких страницах или он может быть плавающим (например, в Chrome на Android). Поэтому ширину нужно вычислять динамически из скрипта.
Дополним метод _bodyScrollControl()
Почему код метода close() упрощён? Дело в том, что просто убирая классы CSS у элементов, мы не можем анимировать закрытие окна.
Проблема №7. При закрытии окна, свойство visibility:hidden применяется сразу и не даёт возможности анимировать закрытие окна.
Причина этого известна: свойство visibility:hidden не анимируется. Конечно, можно обойтись без анимации, но, если она нужна, сделаем следующее.
Создадим дополнительный CSS-класс .hystmodal—moved почти такой-же как и .hystmodal--active
Затем при закрытии сначала добавим этот класс к окну и повесим обработчик события «transitionend» на модальном окне. Затем удалим класс `.hystmodal—active , таким образом вызывая css-переход. Как только переход завершится, сработает обработчик события «transitionend», в котором сделаем всё остальное и удалим сам обработчик события.
Ниже: новая версия методов закрытия окна:
Вы заметили, что мы создали ещё один метод _closeAfterTransition() и перенесли основную логику закрытия туда. Это нужно, чтобы удалить обработчик события transitionend после закрытия окна, ведь в метод removeEventListener необходимо передать именно ту функцию, которую мы привязывали.
Кроме того, если анимация не будет нужна, можно просто вызвать this._closeAfterTransition() не вешая его на событие.
Как мы помним, внутри addEventListener, this будет указывать на селектор где происходит событие, а не на наш экземпляр класса, поэтому в конструкторе нужно добавить ещё одну строчку для жёсткой привязки метода к this.
2.2 Закрытие окна по клику на оверлей
Нам нужно обработать ещё одно событие – закрытие окна по клику на элемент подложки .hystmodal__wrap . Мы можем повесить обработчик клика на документ для делегирования события как при открытии и проверить что событие произошло на .hystmodal__wrap примерно так:
Это будет работать, но есть один малозаметный недостаток.
Проблема №8. Если кнопку мыши нажать внутри окна, а отпустить за его пределами (над подложкой), окно закрывается.
Представьте, что в окне форма. Вы выделяете текст в поле ввода и случайно двигаете мышь чуть дальше, курсор заходит на подложку и вдруг окно закрывается, всё вдруг пропадает из виду. Не хотелось бы, чтобы так было.
Окно закрывается потому что по спецификации, если нажатие и отпускание мыши были на разных элементах, то событие click сработает на самом ближайшем общем для них элементе, а у нас это как раз .hystmodal__wrap .
Мы могли бы решить это изменением html, добавляя ещё один div сразу после .hystmodal__window и размещая его визуально под окном. Но нам бы не хотелось добавлять лишний пустой div ещё сильнее усложняя разметку.
Мы можем разбить наш addEventListener на два отдельных обработчика: для событий mousedown и mouseup и будем проверять чтобы оба события происходили именно на .hystmodal__wrap . Добавим новые обработчики событий в наш метод eventsFeeler()
2.3 Управление фокусом
У нас заготовлено два метода для управления фокусом: focusContol() для переноса фокуса внутрь окна и обратно при его закрытии, а также focusCatcher(event) для блокирования ухода фокуса из окна.
Решения для фокуса были реализованы аналогично js-библиотеке «Micromodal» (Indrashish Ghosh). А именно:
1. В служебный массив сохраним все css селекторы на которых может быть установлен фокус (свойство помещаем в init()):
2. В методе focusContol() находим первый такой селектор в окне и устанавливаем на него фокус, если окно открывается. Если же окно закрывается – то переводим фокус на this.starter :
3. В методе focusCatcher() находим в окне и превращаем в массив коллекцию всех элементов на которых может быть фокус. И проверяем, если фокус должен был выйти на пределы окна, то вместо этого устанавливаем фокус снова на первый или последний элемент (ведь фокус можно переключать как по Tab так и по Shift+Tab в обратную сторону).
Результирующий код метода focusCatcher:
По сути мы реализовали все необходимое для успешного создания модальных окон, осталось ещё несколько дел:
Проблема №9. В IE11 не работают методы Element.closest() и Object.assign() .
Для поддержки Element.closest, воспользуемся полифилами для closest и matches от MDN.
Можно их вставить просто так, но так как у нас проект всё равно собирается webpack, то удобно воспользоваться пакетом element-closest-polyfill который просто вставляет этот код.
Для поддержки Object.assign , можно воспользоваться уже babel-плагином @babel/plugin-transform-object-assign
3. Заключение и ссылки
Повторяя начало статьи, всё изложенное выше, я оформил в маленькую библиотеку hystModal под MIT-лицензией. Вышло 3 кБ кода при загрузке с gzip. Ещё написал для неё подробную документацию на русском и английском языке.
Что вошло ещё в библиотеку hystModal, чего не было в статье:
Настройки (вкл/выкл управление фокусом, варианты закрытия, ожидание анимации закрытия)
Коллбеки (функции вызывающиеся перед открытием окна и после его закрытия (в них передаётся объект модального окна))
Добавлен запрет на какие-либо действия пока анимация закрытия окна не завершится, а также ожидание анимации закрытия текущего окна перед открытием нового (если окно открывается из другого окна).
Оформление кнопки-крестика закрытия в CSS
Минификация CSS и JS плагинами Webpack.
Если вам будет интересна эта библиотека, буду рад звёздочке в GitHub, или напишите в Issues о найденных багах. (Особенно большие проблемы, наверное, в грамматике английской версии документации, так как мои знания языка пока на начальном уровне. Связаться со мной также можно в Instagram
It shows modal dialog something like this, basically, it puts scroll bar around entire modal-dialog and not modal-body that contains the content I am trying to display.
The image looks something like this:
How do I get a scroll bar around modal-body only?
I have tried assigning style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" to modal-body but it didn't work.
15 Answers 15
You have to set the height of the .modal-body in and give it overflow-y: auto . Also reset .modal-dialog overflow value to initial .
See the working sample:
Thanks for this. It works great. May be something is not clear to me in css. I tried assigning modal-body max-height:65% that doesn't work. The solution you provided works only if I assign fixed height to modal-body. Is there no way to say modal-dialog takes 85% of window and modal-body should occupy say 90% of modal-dialog? But again solution you provided works for me, for now. Thanks!
@SubodhNijsure Sorry for the late response. You can't set the height in % because that will mean a % of its parent, in this case the parent is .modal-content and its height depends on its children. That's why it won't work unless you set one of them heights. Either you set .modal-content height or set .modal-body height. If you set .modal-content height then you will be able to set the height of .modal-body in % and it will be a % of its parent so you if you set it less than 100% there will be blank space at the bottom, since you are not filling all .modal-content 's height.
Keep in mind that CSS's initial keyword does not work for Internet Explorer, though it does work for Edge.
just a little pointer: instead of "height 250px" which could look ugly on some phones that are only 230px height, or less with navbar in landscape: just use max-height: 80vh; that is 80% of total viewport height and only for max height, not if it is a small popup
works fine, but after closing the modal, the links on the 'parent' window aren't clickable anymore. solved with following code: .modal .modal-body < max-height: 420px; overflow-y: auto; >
Добавить полосу прокрутки в модальное окно очень просто. Посмотрите пример того что у нас получилось в итоге.
Все решают пару строк: overflow: auto; height: 300px;
Медведь по лесу шлялся озабоченный, Искал, зверюга, лёгкую еду. Он от природы был ленивый очень И не приучен вовсе был к труду.
Не сеял, не пахал и не охотился, И даже не имел своей семьи. И о зиме, понятно, не заботился В компании зачуханной свиньи.
Свинья была глупа необычайно. И то сказать - что можно взять с свиньи. Вот так они бродили. И случайно На рой пчелиный где-то набрели.
А пчёлы мёд по каплям собирали И прятали в обычное дупло. Медведь же со свиньёй давно не жрали. А тут - медок. Вот гадам повезло!
Тут нужно рассказать, что косолапый Имел с рожденья крохотный изъян. Давно бы съел свинью, но. мама с папой Вели свой род от древних мусульман.
Поэтому с ленивым косолапым В лесу никто водится не хотел. Сожрёт тебя, скотина,тихой сапой. Ну, а свинью он есть бы не посмел.
Короче говоря, они дружили Поскольку не с кем было им дружить. А тут дупло! И спазмы сухожилий, И мысль: "До завтра ж можно не дожить!"
Дупло - оно, как водится, не низко, А пчёлы жалят - будь ты хоть медведь. Коль к меду подберёшься очень близко, То искусают в хлам, едрёна медь!
В пустой башке не много размышлений, Но голод - лечит, мягко говоря. Ведь с голодухи - всяк великий гений. Будь ты медведь иль глупая свинья.
Голодный мозг нарисовал картину И даже сотворил в уме чертёж. И вот уже две глупые скотины Зашевелилися, едрёна вошь.
Надули шар воздушный, цветом - синий. Хотя откуда шарики в лесу? Ружьё, под дуб с собою притащили (Повесил кто-то пьяненький на сук).
Лететь решил медведь. Не в весе дело, А в том, что на фига свинье летать? Её удел под дубом престарелым Вчерашний жёлудь в сумерках жевать.
Так пусть берёт ружьё и, залпом, сразу Палит , зараза, изо всех стволов. Но только в шар! И только по приказу! Без возражений и без лишних слов!
И вот вознёсся шар с медведем в небо.. Атака пчёл. Сплошные волдыри. Огузок - решетом. Повтор набега. Истошный вопль: "Стреляй, свинья! Пали!"
И - залп! И - крик! И шумное паденье! Дымок из дула свинского ружья. Семь дыр в боку. Ведь с самого рожденья Косой была проклятая свинья!
Мораль: Хоть лень и двигатель прогресса, Но важно выбирать себе друзей С мозгами. Родом лучше не из леса. И только не косых. И не свиней.
Здравствуйте друзья! В последнее время у читателей блога проявился повышенный интерес к созданию и расширению функционала Модальных окон. Совсем недавно я попытался подробно рассказать, как встроить в модальное окно ротатор контента (текста), надеюсь у меня это получилось.
Пример посмотрели, наиболее любознательные первым делом взглянули на исходный код демо-страницы и все сразу стало ясно, ничего сверхестественного. Можно было использовать textarea,iframe и саму страницу — тег body, в которых гипотетически может появляться полоса прокрутки, но я применил div — контейнер, прописав в стиле все необходимые свойства. В CSS существует замечательное свойство overflow, которое управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Это свойство имеет несколько значений, в нашем случае использовал overflow: auto, полоса прокрутки будет добавляться только по необходимости, т.е. когда размер текста превысит размеры блока. Для того чтобы прокрутка отображалась постоянно, необходимо свойству overflow присвоить значение scroll
Важно отметить, если вы выбрали для размещения контента модальное окно шириной 500px, следует задать ширину блока с текстом чуть меньшую в пределах 480px. Высоту можете выставить любую, хотя не стоит устанавливать слишком малую, узкое окно смотрится не совсем красиво, да и читателю придется постоянно пользоваться прокруткой. В своем примере я установил высоту div-контейнера в 300px, вам же никто не мешает экспериментировать с данным параметром, в ту или в другую сторону.
HTML/CSS
В конечном итоге, в разметке html, мы получаем незамысловатый и легко запоминающийся код, который в последствии, вы без особого труда вставите в модальное окно:
Если всё сделаете правильно, то у вас должно получиться отличное всплывающее окно с полосой прокрутки, в работе над этим вам всегда поможет наглядный пример:
Существуют и другие, не менее интересные методы решения этого вопроса, мы рассмотрели, пожалуй самый простой способ, без излишнего нагромождения кода и использования дополнительного форматирования свойств полосы прокрутки (scrollbar), про которые написано давно, много и подробно, стоит лишь воспользоваться поисковиком, и на вас вывалится не одна тысчонка страниц с инфой по теме. Ну, а мне остается сказать: До свидания!
PS: Меня часто спрашивают, как попасть в Google+? Все очень просто, переходите по ссылке представленной ниже, вводите свой гугловский логин и пароль и начинайте свою бурную деятельность, при этом хотелось бы, что бы вы добавляли меня в свои круги, так как будет много полезного и интересного -)))
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 4
Здравствуйте. Не подскажите как добавить в такое окно автоматическую прокрутку например на 100 пикселей от верха
Огромное спасибо за статью. Очень долго и муторно искал как организовать модальное окно с полосой прокрутки. Нашел 🙂
На дэмках основная страница изначально без скрола. Так неинтересно, это упрощает задачу.
Думаю если ты веб-дев, то увеличить высоту контейнера до прокрутки не составит труда)*
