Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Модальное окно с полосой прокрутки

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

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

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

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

 

Пример посмотрели, наиболее любознательные первым делом взглянули на исходный код демо-страницы и все сразу стало ясно, ничего сверхестественного. Можно было использовать 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+? Все очень просто, переходите по ссылке представленной ниже, вводите свой гугловский логин и пароль и начинайте свою бурную деятельность, при этом хотелось бы, что бы вы добавляли меня в свои круги, так как будет много полезного и интересного -)))
 

У нас нет образования, но есть вдохновение, если бы я получил образование, то я бы стал дураком.

Bob Marley

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

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Здравствуйте.

    Не подскажите как добавить в такое окно автоматическую прокрутку например на 100 пикселей от верха

    Ответить
  2. Огромное спасибо за статью.

    Очень долго и муторно искал как организовать модальное окно с полосой прокрутки. Нашел 🙂

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru