Спливаюче вікно на HTML / CSS / jQuery

Зміст статті
розмітка
напівпрозорий фон
скрипти jQuery
Розширений функціонал - центрування вікна по центру сторінки
підсумки

На багатьох сайтах в Мережі можна зустріти так звані спливаючі вікна (англ. Popup). Таким вікнам легко знайти застосування - це всілякі форми зворотного зв'язку, реєстрації, кошики, реклама чого-небудь і т.д. і т.п. У цій статті займемося реалізацією спливаючого вікна на простому прикладі.

демо

Зміст статті

розмітка
напівпрозорий фон
скрипти jQuery

Останнє оновлення - 24.06.2013.

розмітка

Для прикладу я взяв нескладний макет. Ви також можете знайти будь-які інші варіанти, набравши в Гуглі або щось в цьому роді, ну або намалювати свій варіант, якщо ви хоч трохи дизайнер. Це не важливо.

Так як вікно у нас буде просте, зверстаємо його звичайним HTML (хоча можна зробити динамічно через JS / jQuery). Моє віконце складається з заголовка, тексту і двох кнопок, HTML-код такий:

<Div id = "popup" class = "popup"> <h2 class = "popup-title"> Are You Sure? </ H2> <div class = "popup-content"> <p class = "popup-warning" > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </ p> <div class = "popup-choice"> <button id = "btn-yes" class = "btn-yes"> Yes </ button> <button id = "btn-no" class = "btn-no"> no </ button> </ div> </ div> <div class = "btn-close"> </ div> </ div>

На мій погляд непогана розмітка - використовуються семантичного елементи і класи, ідентифікатори додані для роботи зі скриптами. Якщо не планується підтримка браузерів Internet Explorer нижче 8-ої версії, <div class = "btn-close"> </ div> можна замінити псевдоелементи: after /: before.

Додамо трохи стилів CSS для нашого вікна:

Спливаюче вікно

По відношенню до старих браузерам Internet Explorer можна застосувати принцип graceful degradation.

напівпрозорий фон

Приступимо до створення затемнює напівпрозорого фону на всю сторінку. Згодом організуємо його поява разом зі спливаючих вікном - це буде виглядати дуже ефектно.

Додамо в кінець документа перед закриває тегом </ body> порожній елемент <div> з id і class:

Растянем його на всю ширину і висоту документа, додамо прозорість, фіксоване позиціонування і великий z-index для перекриття всіх елементів на сторінці - більший z-index повинен бути тільки у спливаючому вікні:

.hide-layout {background: # 000; / * Фон * / bottom: 0; / * Координата знизу * / filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50); / * Прозорість для IE * / height: 100%; / * Висота на всю сторінку * / opacity: 0.5; / * Прозорість шару * / position: fixed; / * Фіксуємо елемент на сторінці * / top: 0; / * Координата зверху * / width: 100%; / * Ширина на всю сторінку * / z-index: 998; / * Z-index для перекриття інших елементів * /}

Зверніть увагу на те що одним з ключових властивостей тут є position: fixed, щоб темний фон прокручувався при Скролл сторінки. Тому такий спосіб не буде працювати в IE6 - він це властивість не підтримує і доведеться звертатися за допомогою до JS. Але ж ми вже залишили в спокої цей браузер, вірно?

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

Результат виконаної роботи, поки без скриптів:

Дивіться приклад

скрипти jQuery

базовий функціонал

Давайте наведемо в дію наше вікно, реалізуємо його спливання при настанні якої-небудь події, наприклад при натисканні миші. Додамо в документ текст, при кліці на який буде з'являтися вікно:

Чому я не використовую тег посилання <a> в даному випадку? Тому що використання нейтрального елемента грамотніше, докладніше читайте тут -.

Почнемо скріптовать наше спливаюче вікно:

<! - підключили jQuery -> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </ script> <script> $ ( function () {// тут наступний код ...}) </ script>

Спершу приховуємо вікно і додамо кросбраузерності прозорість контейнера з фоном:

$ ( '# Popup'). Hide (); $ ( '# Hide-layout'). Css ({opacity: .5});

Звичайно можна приховати необхідні елементи CSS-властивість display: none, але при вимкненому JS ми не зможемо відкрити вікно. Хоча все залежить від поставленого завдання.

Для зручності користувача можна додати в розмітку повідомлення тим, у кого вимкнений JS, щось на зразок цього:

<! - повідомляємо користувачеві -> <noscript> Для коректної роботи сторінки включите JavaScript в настройках браузера </ noscript>

Примітка: а шар з фоном все-таки приховуємо через CSS, інакше при вимкненому JavaScript він все перекриє.

Наступний крок - повісимо обробники на подію click елементам # click-me для показу вікна і # btn-close, # hide-layout, відповідно для приховування. Скористаємося готовими методами fadeIn / fadeOut:

$ ( '# Click-me'). Click (function () {$ ( '# hide-layout, #popup'). FadeIn (300); // плавно показуємо вікно / фон}) $ ( '# btn-close , # hide-layout '). click (function () {$ (' # hide-layout, #popup '). fadeOut (300); // плавно приховуємо вікно / фон})

Також необхідно повісити обробники на кнопки вибору, при кліці виробляємо якусь дію, після виконання знову приховуємо вікно:

// повісили обробники на кнопки $ ( '# btn-yes, # btn-no'). Click (function () {alert ( 'Виконали якась агресивна дія, потім приховуємо вікно ...'); $ ( '# hide -layout, #popup '). fadeOut (300);})

Як бачите, з використанням jQuery все стає просто до неподобства. Навіть ваша бабуся розбере цей код.

Розширений функціонал - центрування вікна по центру сторінки

Тепер все працює як треба, але зробимо ще дещо, а саме центруємо вікно посередині сторінки на jQ. Знову ж можна обійтися звичайним CSS, але JS / jQuery дозволяє зробити все гнучкіше - динамічно вирахуємо розміри вікна і елемента і підставимо потрібні координати, оформивши все це простенької функцією:

// функція приймає елемент, який необхідно центрувати function alignCenter (elem) {elem.css ({// призначення координат left і top left: ($ (window) .width () - elem.width ()) / 2 + 'px ', top: ($ (window) .height () - elem.height ()) / 2 +' px '})}

Особливої уваги заслуговують значення координат left і top, в яких ми виссчітиваем ширину / висоту вікна браузера, віднімаємо від неї ширину / висоту прийнятого елемента і ділимо отримані значення на два - це і буде центр сторінки. Як параметр функції додамо елемент #popup. Залишилося внести зміни в код - викличемо функцію на початку скрипта, а також повісимо її на обробник resize (зміна розмірів вікна) об'єкта window, щоб віконце завжди знаходилося по центру. Повний код:

$ (Function () {$ ( '# popup'). Hide (); // приховали фон і спливаюче вікно $ ( '# hide-layout'). Css ({opacity: .5}); // кросбраузерності прозорість alignCenter ($ ( '# popup')); // центрованої вікно $ (window) .resize (function () {alignCenter ($ ( '# popup')); // центрування при ресайз вікна}) $ ( '# click- me '). click (function () {$ (' # hide-layout, #popup '). fadeIn (300); // плавно відкриваємо}) $ (' # btn-close, # hide-layout '). click (function () {$ ( '# hide-layout, #popup'). fadeOut (300); // плавно приховуємо}) $ ( '# btn-yes, # btn-no'). click (function () { alert ( 'Виконали якась агресивна дія, потім приховуємо вікно ...'); // зробили щось ... $ ( '# hide-layout, #popup'). fadeOut (300); // приховали}) // функція центрування function alignCenter (elem) {elem.css ({left: ($ (window) .width () - elem.width ()) / 2 + 'px', // получа м координату центру по ширині top: ($ (window) .height () - elem.height ()) / 2 + 'px' // отримуємо координату центру по висоті})}})

підсумки

перевірено

Internet Explorer 7 +
Opera
Firefox
Chrome
Safari

оновлення 24.06.2013

Як зауважив читачів для спливаючого вікна не був врахований скролінг документа. Щоб змусити переміщатися наше віконце вгору-вниз при прокручуванні, потрібно просто додати елементу .popup властивість position: fixed.

Дякую користувачам Андрій і ebragim.

Але ж ми вже залишили в спокої цей браузер, вірно?

Статьи