Спливаюче вікно jquery, загальна інформація про створення

Спливаюче вікно jquery, загальна інформація про створення

Одним із способів залучення користувачів на сайт є спливаючі вікна. Звичайно, це не дає стовідсоткової гарантії підвищення відвідуваності, але все-таки на деякий час вони привертають увагу до інформації.

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


Сторінка сайту створюється за допомогою мови HTML. На ній, в тому порядку, який подобається власнику ресурсу, розміщуються кнопки. Їх може бути кілька штук (від однієї до...), на розсуд створює. Натискаючи на таку кнопочку, відвідувач буде бачити спливаюче вікно jquery. Зміст оних може бути абсолютно різним, наприклад приваблива картинка або нова форма реєстрації, реклама, повідомлення, та все що завгодно. Фантазія в цій справі не обмежується жодними межами. Спливаючі вікна частіше за все перекривають сторінку сайту прозорим темним тлом і на кожному з них присутня піктограма, зазвичай розумна користувачами на рівні інтуїції. Можливості даної функції безмежні.

На перший погляд, створити таку річ складно, але це помилкове враження. Якщо є бажання і існує потреба, чому б у цьому не розібратися детальніше? Навіть якщо багато чого незрозуміло, завжди є можливість вивчити процес, звернувшись до професіоналів. Давайте, наприклад, створимо і розмістимо кнопки, які будуть викликати вікна реєстрації, картинок або фотографій і вкладки. Використовуючи javascript спливаюче вікно, вірніше кнопку, оформляємо у вигляді посилання і задаємо для всіх них загальний клас. Посилання поміщаємо всередину теґу div-а.

Атрибут rel, доданий в кожну, в точності відповідає класовій назві вікна і дає можливість відкрити потрібне, ледь лише клацнувши на посилання. Все, що спливає вікно jquery ми створили. Тепер залишається його зробити акуратним і привабливим. Для цього потрібні стилі.

Робота в стилях складнощів не викликає: все просто і зрозуміло. Треба тільки хоч трохи володіти мовою HTML. Але навіть якщо користувач не розбирається в ньому, потрібні відомості легко знайти в інтернеті. Для того щоб кнопки jquery, спливаючі вікна виглядали у всіх відомих на сьогоднішній день браузерах однаково красиво і акуратно, треба: а) центрувати блоки посилань; б) заокруглити кути; в) підключити PIE для ІЄ 7-8.

В цілому, розмітка HTML буде однаковою для всіх спливаючих вікон. Тому на використанні тегів не варто зациклюватися: якщо не володієте, достатньо запам 'ятати кілька основних. Різниця буде лише у вигляді розмірів, тобто одне спливаюче вікно jquery буде виглядати дещо інакше. Те ж саме стосується і вмісту.

Для розміщення форми реєстрації в зазначений вище тег треба записати наступне:


Close

Реєстрація на сайті

Введіть логін: Введіть пароль:

У цьому записі reg_form збігається з атрибутом першої кнопки rel, а подвійний клас обгортаючого блоку задається popup reg_form (пробіл обов 'язковий). За допомогою цього пункту можна створити спільний стиль для всіх спливаючих вікон, а також вказати конкретні параметри для кожного.

Далі починаємо розміщувати кнопку, що відповідає за картинки. Тут теж саме: вказує подвійний клас і позначає шлях до теки, де ці зображення знаходяться. Ну і далі в тому ж дусі.

Після створення залишиться тільки підкоригувати загальний вигляд сторінки сайту, прописати правила для вікон. Тобто вони всі будуть однаково оформлені, відредаговані по горизонталі, і кожне буде мати кнопку, що відповідає за закриття самого вікна і його заголовка. Крім того, при завантаженні сторінки ресурсу вони всі будуть приховані.

Якщо ж немає ніякого бажання робити це самому, завжди є можливість завантажити скрипт, що дозволяє створити спливаюче вікно автоматично, тільки трохи коригуючи дії програмки.