з id і class:
Растянем його на всю ширину і висоту документа, додамо прозорість, фіксоване позиціонування і великий z-index для перекриття всіх елементів на сторінці - більший z-index повинен бути тільки у спливаючому вікні:
Зверніть увагу на те що одним з ключових властивостей тут є position: fixed. щоб темний фон прокручувався при Скролл сторінки. Тому такий спосіб не буде працювати в IE6 - він це властивість не підтримує і доведеться звертатися за допомогою до JS. Але ж ми вже залишили в спокої цей браузер, вірно?
І ще момент - кросбраузерності прозорість далі я реалізую через jQ, в IE був виявлений невеликий недолік при показі прихованого блоку.
Результат виконаної роботи, поки без скриптів:
скрипти jQuery
базовий функціонал
Давайте наведемо в дію наше вікно, реалізуємо його спливання при настанні якої-небудь події, наприклад при натисканні миші. Додамо в документ текст, при кліці на який буде з'являтися вікно:
Натисніть тут для відкриття спливаючого вікна
Почнемо скріптовать наше спливаюче вікно:
Спершу приховуємо вікно і додамо кросбраузерності прозорість контейнера з фоном:
Звичайно можна приховати необхідні елементи CSS-властивість display: none. але при вимкненому JS ми не зможемо відкрити вікно. Хоча все залежить від поставленого завдання.
Для зручності користувача можна додати в розмітку повідомлення тим, у кого вимкнений JS, щось на зразок цього:
Наступний крок - повісимо обробники на подію click елементам # click-me для показу вікна і # btn-close, # hide-layout. відповідно для приховування. Скористаємося готовими методами fadeIn / fadeOut:
Також необхідно повісити обробники на кнопки вибору, при кліці виробляємо якусь дію, після виконання знову приховуємо вікно:
Як бачите, з використанням jQuery все стає просто до неподобства. Навіть ваша бабуся розбере цей код.
Розширений функціонал - центрування вікна по центру сторінки
Тепер все працює як треба, але зробимо ще дещо, а саме центруємо вікно посередині сторінки на jQ. Знову ж можна обійтися звичайним CSS, але JS / jQuery дозволяє зробити все гнучкіше - динамічно вирахуємо розміри вікна і елемента і підставимо потрібні координати, оформивши все це простенької функцією:
Особливої уваги заслуговують значення координат left і top. в яких ми виссчітиваем ширину / висоту вікна браузера, віднімаємо від неї ширину / висоту прийнятого елемента і ділимо отримані значення на два - це і буде центр сторінки. Як параметр функції додамо елемент #popup. Залишилося внести зміни в код - викличемо функцію на початку скрипта, а також повісимо її на обробник resize (зміна розмірів вікна) об'єкта window. щоб віконце завжди знаходилося по центру. Повний код:
Як зауважив читачів для спливаючого вікна не був врахований скролінг документа. Щоб змусити переміщатися наше віконце вгору-вниз при прокручуванні, потрібно просто додати елементу .popup властивість position: fixed.
Дякую користувачам Андрій і ebragim.
Рейтинг статті
Андрій, це можна зробити набагато простіше: зробіть для спливаючого вікна position: fixed
D такі вікна як правило не виводять дуже багато інформації, так що нехай воно висить як і затемнена підкладка завжди в центрі. А якщо хочете вивести дуже багато інформації відразу - краще оформити в окрему сторінку. Або приховувати інформацію в міру введення, наприклад вікно чекаута магазину: запитати у користувача особисті дані, і приховати, відкрити друге вікно итд ...
Спасибі, взяв за основу Ваш скрипт. Однак при реалізації з'ясувалося, що не врахований скролінг в функції центрування. Тому, довелося трохи змінити розрахунок координати по висоті:
top: $ (document) .scrollTop () + ($ (window) .height () - elem.height ()) / 2 + 'px'
ну і як наслідок, щоб обчислювався scrollTop в момент виклику вікна, довелося перенести виконання центрування і центрування при ресайз на обробник '# click-me'. На той же обробник додав ще один рядок, щоб не Скрол при роботі #popup:
ну і скасування на обробник '# btn-close, # hide-layout':
Андрій, спасибі за дослідження і за те що поділилися результатами, треба буде доповнити статтю. З'явилися ідеї, як реалізувати вікно ще більш гнучко, буде час - додам.
Схожі статті