Модальне вікно зі смугою прокрутки

Модальне вікно зі смугою прокрутки

Привіт, друзі!
Останнім часом у Новомосковсктелей блогу проявився підвищений інтерес до створення і розширення функціоналу модальності вікон. Зовсім недавно я спробував докладно розповісти, як вбудувати в модальне вікно ротатор контенту (тексту), сподіваюся у мене це вийшло.

Рішення і весь механізм виконання, виявився дуже простий, не важливо, будете ви виводити текст в головне вікно або в діалогове. Смугу прокрутки можна приробити навіть до кнопки! Давайте разом з вами, шановні Новомосковсктелі, детально розглянемо, як можна помістити в модальне вікно об'ємний текст використовуючи смугу прокрутки, тим самим зберігаючи розміри вікна.

Приклад подивилися, найбільш допитливі насамперед поглянули на вихідний код демо-сторінки і все відразу стало ясно, нічого надприродного. Можна було використовувати textarea, iframe і саму сторінку - тег body. в яких гіпотетично може з'являтися смуга прокрутки, але я застосував div - контейнер, прописавши в стилі всі необхідні властивості. У CSS існує чудова властивість overflow. яке управляє відображенням змісту блокового елемента, якщо воно цілком не поміщається і виходить за область заданих розмірів.

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

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

В кінцевому підсумку, в розмітці html, ми отримуємо нехитрий і легко запам'ятовується код, який надалі, ви без особливих зусиль вставите в модальне вікно:

Якщо все зробите правильно, то у вас повинно вийти відмінне спливаюче вікно зі смугою прокрутки, в роботі над цим вам завжди допоможе наочний приклад:

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

PS: Мене часто запитують, як потрапити в Google+? Все дуже просто, переходите за посиланням представленої нижче, вводите свій гугловський логін і пароль і починайте свою бурхливу діяльність, при цьому хотілося б, що б ви додавали мене в свої кола, так як буде багато корисного і цікавого -)))

У нас немає освіти, але є натхнення, якби я отримав освіту, то я б став дурнем.

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