Створення модальних вікон досить затребувана необхідність, яка може на практиці виникатимуть повсюдно для різних цілей, будь то просте інформаційне повідомлення, форма введення, або що-небудь ще. На щастя вже є готові напрацювання інших програмістів, якими можна скористатися і тим самим заощадити свій час для інших завдань. Зараз ми поговоримо про те, як можна скористатися бібліотекою Jquery а так же fancybox для створення модального вікна.
Качаємо архів з файлами. далі розглянемо, як можна прикрутити все це справа в своєму проекті. Розпакуйте архів, розмістіть файли в директорію вашого шаблону, далі підключаємо в необхідні файли в head-заголовку сторінки:
Тепер безпосередньо до самої форми. Форма може бути абсолютно довільна, з набором ваших полів, або інших даних, це не принципово, ключовий момент тут в тому, що все це справа ми укладаємо в блок, і присвоюємо йому атрибут id, в моєму випадку це feedback. У стилях для цього блоку встановлюємо значення display: none, щоб на самій сторінці форма не показувалася.
Зверніть увагу на атрибути посилання, в href вказано id форми, а так же клас modalbox, який так само буде використаний для ініціалізації спливаючого вікна.
Подібним чином можна зробити будь-модальне вікно, з довільними полями, і іншими даними, який ви укладаєте в блоці. Задавайте питання, постараюся допомогти.
Ось приклад як вікно працює.