Спливаючі віконця найрізноманітнішого призначення мають масу застосувань у веб-вартуванні. Їх можна використовувати для створення різного роду меню, розміщення рекламних текстів та графіки, спливаючих підказок при заповненні складних форм, та й самі форми зручно розміщувати у вікнах, що не займають місця на сторінці. У нашій статті ви знайдете опис того, як можна зробити таке вікно.
Вам знадобиться
- Базові знання мови HTML.
Інструкція
1. вигулькне вікно, HTML-код, прихований шар
2. На багатьох сторінках мережі можна побачити, що для створення в сторінках спливаючих вікон залучаються наворочені бібліотеки різних JavaScript-фреймворків (jQuery, MooTools, Prototype тощо). Однак насправді в них немає необхідності при вирішенні саме цього завдання. Для створення спливаючих вікон цілком достатньо засобів, наявних у мові розмітки гіпертексту (HTML) і мові опису каскадних таблиць стилів (CSS). Створювані цим способом вікна працюватимуть незалежно від того, чи включена в переглядач підтримка JavaScript.Весь код, що створює спливаюче вікно можна розмістити в двох рядках. Перший рядок створює посилання, яке потрібно клацнути, щоб з 'явилося спливаюче вікно:<a onmouseover='this.style.cursor=""pointer"" ' onfocus='this.blur();' onclick=""document.getElementById('PopUp').style.display='block'""><span style=""text-decoration: underline; "" > Натиснути тут! </span > </a > Тут атрибут onmouseover тега посилання визначає стандартний для посилань тип курсора при наведенні миші. Атрибут onclick вказує, що при клацанні за посиланням прихований блок з ідентифікатором PopUp повинен стати видимим. Другий рядок - це, власне, і є спливаюче віконце. Шар з ідентифікатором PopUp і вказаними в атрибуті style розмірами вікна, кольором і розміром тексту, фону і рамки:<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135рх; "> Це текст у спливаючому вікні </div > Типовий текст не видно - на це вказує селектор display зі значенням none в описі стилю шару. Власне, це і все, що потрібно для створення спливаючого вікна - розмістіть ці два рядки між тегами < body > і </body > вашої сторінки і воно готове до роботи.
3. Щоб мати можливість закрити спливаюче вікно перед тегом </div > потрібно додати посилання, що виконує зворотну дію - приховує видимий шар з ідентифікатором PopUp:<br /><div style='text-align: right;'><a onmouseover='this.style.cursor=""pointer"" ' style='font-size: 12px;' onfocus='this.blur();' onclick=""document.getElementById('PopUp').style.display = 'none' "" ><span style=""text-decoration: underline; "" > закрити </span > </a > </div >
4. А якщо ви хочете, щоб віконце спливало не за клацанням, а при наведенні курсора миші, то перший рядок з посиланням потрібно модифікувати таким чином:<a onmouseover=""document.getElementById('PopUp').style.display = 'block' "" onmouseout=""document.getElementById('PopUp').style.display = 'none' "" onfocus='this.blur();'><span style=""text-decoration: underline; "" > навести мишу сюди! </span > </a >
5. З принципом і структурою коду спливаючого вікна ви тепер знайомі, а оформлення його зовнішнього вигляду і вмісту цілком залежить від ваших цілей і фантазії.