Всім привіт! Нещодавно надійшла завдання динамічно вивести повідомлення на події, які викликає відвідувач сайту. Давайте спробуємо створити інформативні повідомлення на сайті за допомогою JQuery і CSS.
Спливаючі вікна мають широкий діапазон застосувань - від корисного для споживача програмного забезпечення до злочинного.
В даному коді, як ви бачите, наведені такі види повідомлень, як: інформаційне повідомлення, повідомлення про помилку, попередження і повідомлення про успішне виконання операції.
Далі пропишемо стилі, а саме виконання анімованих діагональних смужок повідомлень.
Спочатку сховаємо всі повідомлення за допомогою фіксованого позиціонування (значення absolute використовується тільки для IE6, так як він не підтримує position: fixed).
І так, CSS готовий, приступимо до jQuery. Спочатку створимо масив повідомлень які будемо обробляти і виводити:
Далі розглянемо функцію, яка приховує всі повідомлення.
Залежно від кількості тексту висота повідомлення може змінюватися динамічно, тому висота повідомлень обчислюється, щоб приховувати повідомлення коректно.
Функція showMessage викликається при натисканні на кнопку, вона і відповідає за анімацію повідомлення і точку зупинки на екрані, так як спливаючі повідомлення показуються під шапкою (це добре видно на демонстрації).
Після завантаження сторінки приховуємо всі повідомлення: hideAllMessages (). Потім при натисканні на відповідну кнопку виводимо повідомлення: