Модальне вікно як вконтакте
Як зробити на сайті модальне вікно як вконтакте.
Про сам jQuery поширюватися не буду, скажу лише, що останню версію цього фреймворка можна завжди скачати на сайті: jquery.com
Для початку розглянемо, то як модальні вікна поводяться ВКОНТАКТЕ і які можливості вони мають, виходячи з цього спробуємо зробити щось подібне.
- Найважливішим і цікавим властивістю модальних вікон ВКОНТАКТЕ є, то що при їх відкритті змінюється смуга прокрутки браузера і в цьому випадку ми можемо прокручувати тільки вміст модального вікна, а при його закритті ми повертаємося до тієї частини основної сторінки на якій зупинилися.
- Модальні вікна ВКОНТАКТЕ закриваються або після натискання посилання "закрити", або при натисканні на хрестику, або при натисканні на сірому тлі.
- Внизу модального вікна присутній кругленька кнопочка, яка дозволяє змінити фон, який перекриває основну частину сторінки за модальним вікном.
- Також ці модальні вікна мають можливість розтягування при зміні розмірів браузера, однак, ця частина в даному прикладі не буде реалізована.
Поставлені завдання будуть зводитися до реалізації перших 3х пунктів, однак розташування елемента, що змінює фон ми поміняємо і розташуємо його зліва вгорі.
Отже відразу продемонструю. що у нас вийде в підсумку.
Почнемо з того, що визначимо структуру документа і позначимо контейнери з контентом.
Далі визначимо CSS властивості наших елементів, весь CSS не буду приводити тут, його можна подивитися в демо версії, наведу тільки те, на що слід звернути увагу.
Далі підуть JQuery функції, які будуть відповідати за взаємодію елементів на сторінці.
Модальне вікно готове, нічого складного, як бачите, немає. Все до неподобства легко і просто, а головне зручно застосовувати такі вікна на своїх сайтах і проектах.