Як зробити спливаюче вікно

Як зробити спливаюче вікно

Спливаючі віконця самого різного призначення мають масу застосувань у веб-Будівництво. Їх можна використовувати для створення різного роду меню, розміщення рекламних текстів і графіки, спливаючих підказок при заповненні складних форм, та й самі форми зручно розміщувати у вікнах, не займають місця на сторінці. У нашій статті ви знайдете опис того, як можна зробити таке вікно.

Вам знадобиться

Базові знання мови 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: 135px; ‘> Це текст у спливаючому вікні </ div>

    За умовчанням він не видно — на це вказує селектор display із значенням none в описі стилю шару.

    Власне, це і все що потрібно для створення спливаючого вікна — розмістіть ці два рядки між тегами <body> і </ body> вашої сторінки і воно готове до роботи.
  3. Щоб мати можливість закрити спливаюче вікно перед тегом потрібно додати посилання, що виконує зворотну дію — приховує видимий шар з ідентифікатором 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. З принципом і структурою коду спливаючого вікна ви тепер знайомі, а оформлення його зовнішнього вигляду і вмісту цілком залежить від ваших цілей і фантазії.