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

0
88

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

Сьогодні один з відвідувачів блогу помітив таку особливість, що якщо додати в модальний занадто багато тексту, то воно витягується по довжині і неможливо прокрутити вгору, щоб побачити весь текст цілком, так і кнопка закриття при цьому ховається за межі видимості, що само собою вже не є добре. Звичайно модальний чудово закривається кліком в будь-якому місці сторінки, але як правильно зауважив Роман(від його коммент і танцюємо), не всі відвідувачі сайту з цим можуть впоратися… Відповідно у читача виникло питання, як додати в дане модальне вікно смугу прокрутки?

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

Дивитися Демо

Приклад подивилися, найбільш допитливі першим ділом поглянули на вихідний код демо-сторінки і все відразу стало ясно, нічого надприродного. Можна було використовувати 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 та поділіться посиланням на запис в своїх соціальних мережах:

LEAVE A REPLY

Please enter your comment!
Please enter your name here