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

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

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

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

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

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

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

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

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

Close

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

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

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

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

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

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