Модальное окно с полосой прокрутки

Здравствуйте друзья!
В последнее время у читателей блога проявился повышенный интерес к созданию и расширению функционала Модальных окон. Совсем недавно я попытался подробно рассказать, как встроить в модальное окно ротатор контента (текста), надеюсь у меня это получилось.

Сегодня один из посетителей блога заметил такую особенность, что если добавить в модальное окно слишком много текста, то оно вытягивается по длине и невозможно прокрутить вверх, чтобы посмотреть весь текст целиком, да и кнопка закрытия при этом скрывается за пределы видимости, что само собой уже ни есть хорошо. Конечно модальное окно прекрасно закрывается кликом в любом месте страницы, но как правильно заметил Роман(от его коммента и пляшем),  не все посетители сайта с этим могут справиться… Соответственно у читателя возник вопрос, как добавить в данное модальное окно полосу прокрутки?

Решение и весь механизм исполнения, оказался очень прост, не важно, будете вы выводить текст в главное окно или в диалоговое. Полосу прокрутки можно приделать даже к кнопке! Давайте вместе с вами,  уважаемые читатели,  детально рассмотрим,  как можно поместить в модальное окно объемный текст используя полосу прокрутки, тем самым сохраняя размеры окна.
 

 

Пример посмотрели, наиболее любознательные первым делом взглянули на исходный код демо-страницы и все сразу стало ясно, ничего сверхестественного. Можно было использовать textarea,iframe и саму страницу — тег body, в которых гипотетически может появляться полоса прокрутки, но я применил div — контейнер, прописав в стиле все необходимые свойства. В CSS существует замечательное свойство overflow, которое управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Это свойство имеет несколько значений, в нашем случае использовал overflow: auto, полоса прокрутки будет добавляться только по необходимости, т.е. когда размер текста превысит размеры блока. Для того чтобы прокрутка отображалась постоянно, необходимо свойству overflow присвоить значение scroll

Важно отметить, если вы выбрали для размещения контента модальное окно шириной 500px, следует задать ширину блока с текстом чуть меньшую в пределах 480px. Высоту можете выставить любую, хотя не стоит устанавливать слишком малую, узкое окно смотрится не совсем красиво, да и читателю придется постоянно пользоваться прокруткой. В своем примере я установил высоту div-контейнера в 300px, вам же никто не мешает экспериментировать с данным параметром, в ту или в другую сторону.

HTML/CSS

В конечном итоге, в разметке html, мы получаем незамысловатый и легко запоминающийся код, который в последствии, вы без особого труда вставите в модальное окно:
 

<div style="padding: 20px;
overflow: auto;
width: 480px;
height: 300px;
background-color: #ffffff;">
Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
</div>

 
Если всё сделаете правильно, то у вас должно получиться отличное всплывающее окно с полосой прокрутки, в работе над этим вам всегда поможет наглядный пример:
 

 
Существуют и другие, не менее интересные методы решения этого вопроса, мы рассмотрели, пожалуй самый простой способ, без излишнего нагромождения кода и использования дополнительного форматирования свойств полосы прокрутки (scrollbar), про которые написано давно, много и подробно, стоит лишь воспользоваться поисковиком, и на вас вывалится не одна тысчонка страниц с инфой по теме.
Ну, а мне остается сказать: До свидания!
 
PS: Меня часто спрашивают, как попасть в Google+? Все очень просто, переходите по ссылке представленной ниже, вводите свой гугловский логин и пароль и начинайте свою бурную деятельность, при этом хотелось бы, что бы вы добавляли меня в свои круги, так как будет много полезного и интересного -)))
 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: