Вы здесь
Главная > Мой блог > WEB-разработка > Модальное окно с полосой прокрутки

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

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

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

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

HTML/CSS

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

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

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

Источник: http://dbmast.ru

Добавить комментарий

Top