Борознячи простори глобальної павутини, я думаю, ви не раз стикалися з подібними спливаючими вікнами. Не дивлячись на те, що у користувачів приходять на ваш сайт вже даними давно виробився інстинкт: "Бачу спливаюче вікно - відразу закриваю!", Нам все одно може стати в нагоді даний скрипт. А з цього, чи не повільно приступимо до його розробки.
Готуємо вікно до спливання.
Файл стилів windowstyle.css ми не будемо розглядати детально, тому що він дуже великий і не володіє правом витрачати наш час. Просто скачайте його разом з необхідним набором картинок.
Перенесемо картинки з вмісту архіву в папку images. а також замінимо наш windowstyle.css і продовжимо підготовку. Для завершення церемонії приготування, нам залишається створити HTML код майбутнього спливаючого вікна.
Ось таким повинен вийти файл window.html
контент сторінки
Спливаюче вікно jQuery
![]()
Показати спливаюче вікно
Отже, шановні читачі, вітаю, підготовча частина закінчена, і ми можемо перейти до призначення даної статті, а саме до написання скрипта.
Пишемо скрипт "спливаюче вікно jQuery"
На цьому етапі ми маємо вже сформований вікно, яке в першу чергу потрібно приховати, а в наслідку, при натисканні на блок showWindow воно повинно плавно відобразитися.
Наступний шматочок коду як це не дивно вже робить левову частку функціоналу:
Власне на цьому можна і закінчити, але це було б занадто просто. Для того, щоб по практикуватися з jQuery я пропоную зробити кілька ефектів:
- Вирівнювання блоку pop-up-window по центру браузера;
- Випадання вікна з-за кордону браузера;
- Почергове відкриття і закриття вікна при натисканні на блок showWindow;
- Спливання вікна по таймеру;
Вирівнювання блоку по центру браузера
Щоб вирівняти DIV по центру браузера, без jQuery не обійтися, але це і не страшно, адже за допомогою цієї чудової бібліотеки ми двома рядками зможемо вирівняти наше спливаюче вікно по центру. Все що нам потрібно це прописати до виклику:
Почергове поява і зникнення вікна при натисканні на блок showWindow
Спробуємо зробити так, щоб після того як вікно вже показано на екрані, при повторному натисканні на блок showWindow виконувався процес протилежний попередньому. Тобто вікно повинно плавно йти за межі сторінки. Реалізувати це нам може допомогти подія slideToggle ( "slow"). досить замінити на нього вже використовується нами подія show (1000) і все запрацює.
Але ж ми хочемо попрактикуватися і створити ексклюзивний велосипед у вигляді спливаючого вікна jQuery. тому ми винайдемо такий скрипт:
Схожі статті
Отже, шановні читачі, вітаю, підготовча частина закінчена, і ми можемо перейти до призначення даної статті, а саме до написання скрипта.
Пишемо скрипт "спливаюче вікно jQuery"
На цьому етапі ми маємо вже сформований вікно, яке в першу чергу потрібно приховати, а в наслідку, при натисканні на блок showWindow воно повинно плавно відобразитися.
Наступний шматочок коду як це не дивно вже робить левову частку функціоналу:
Власне на цьому можна і закінчити, але це було б занадто просто. Для того, щоб по практикуватися з jQuery я пропоную зробити кілька ефектів:
- Вирівнювання блоку pop-up-window по центру браузера;
- Випадання вікна з-за кордону браузера;
- Почергове відкриття і закриття вікна при натисканні на блок showWindow;
- Спливання вікна по таймеру;
Вирівнювання блоку по центру браузера
Щоб вирівняти DIV по центру браузера, без jQuery не обійтися, але це і не страшно, адже за допомогою цієї чудової бібліотеки ми двома рядками зможемо вирівняти наше спливаюче вікно по центру. Все що нам потрібно це прописати до виклику:
Почергове поява і зникнення вікна при натисканні на блок showWindow
Спробуємо зробити так, щоб після того як вікно вже показано на екрані, при повторному натисканні на блок showWindow виконувався процес протилежний попередньому. Тобто вікно повинно плавно йти за межі сторінки. Реалізувати це нам може допомогти подія slideToggle ( "slow"). досить замінити на нього вже використовується нами подія show (1000) і все запрацює.
Але ж ми хочемо попрактикуватися і створити ексклюзивний велосипед у вигляді спливаючого вікна jQuery. тому ми винайдемо такий скрипт: