Як зробити спливаюче вікно в html
Створення спливаючого вікна в HTML проводитися з використанням бібліотеки JQuery, яка дозволяє інтегрувати на web-сторінку обробник подій і тим самим дати можливість відобразити активний вміст сайту.
1
Відкрийте вашу сторінку сайту на HTML в текстовому редакторі, який ви використовуєте для написання потрібного коду. Для вставки спливаючого вікна ви також можете скористатися стандартною утилітою Windows «Блокнот». Для цього клікніть правою клавішею миші на файлі HTML і виберіть "Відкрити за допомогою» - «Блокнот».
2
У секції документа створіть шар, який буде обробляти JQuery:
3
Потім необхідно зазначити назву спливаючого вікна. Для цього можна скористатися різнорівневими заголовками HTML:
заголовок вікна
4
Після цього задайте текст, який буде відображатися у вікні із застосуванням скрипта для створення абзацу:
текст
5
Потім створіть шар з класом close_win для закриття спливаючого вікна, перед цим закривши попередній дескриптор:
Закрити вікно6
Підключіть бібліотеку jQuery в файлі, прописавши потрібний тег між дескрипторами документа. наприклад:
7
Після цього введіть код для відображення спливаючого вікна:
8
Потім необхідно обробити подію натискання користувачем клавіші миші для виклику спливаючого вікна і обробити закриття вікна. Для цього впишіть наступний код:
$ ( `# Click-me`). Click (function () {$ ( `# show`). Fadein (300) -})
$ ( `# Close_win`). Click (function () {$ ( `# show`). FadeOut (300) -})
< / scriptgt; })
Дана програма обробляє натискання користувачем клавіш виклику спливаючого вікна і натискання на посилання для його закриття.
9
Для відображення спливаючого вікна на сторінці ви можете скористатися посиланням класу click-me, який був заданий у коді вище. Для цього в тілі документа введіть наступний код:
Корисна порада
Для зміни зовнішнього вигляду вікна ви можете скористатися кодом на основі CSS, при знанні якого ви зможете обробити відповідні класи і задати їм будь-який зовнішній вигляд.
Статті за темою "Як зробити спливаюче вікно в html"
Оцініть, будь ласка статтю