Додому Html, CSS, Javascript Використовуємо fancybox і jquery для створення модальних вікон

Html, CSS, Javascript

Використовуємо fancybox і jquery для створення модальних вікон

по

08.11.2021

322

Створення модальних вікон досить затребувана необхідність, яка може на практиці виникати повсюдно для різних цілей, будь то просте інформаційне повідомлення, форма введення, або що-небудь ще. На щастя вже є готові напрацювання інших програмістів, якими можна скористатися і тим самим заощадити свій час для інших завдань. Зараз ми поговоримо про те, як можна скористатися бібліотекою Jquery а так само fancybox для створення модального вікна.

Качаємо архів з файлами, далі розглянемо, як можна прикрутити все це справа в своєму проекті. Розпакуйте архів, додайте файли в директорію вашого шаблону, далі підключаємо в необхідні файли у head-заголовку сторінки:

Тепер безпосередньо до самої форми. Форма може бути абсолютно довільна, з набором ваших полів, або інших даних, це не принципово, ключовий момент тут в тому, що все це справа ми укладаємо в блок, і присвоюємо йому атрибут id, в моєму випадку це feedback. В стилях для цього блоку встановлюємо значення display:none, щоб на сторінці форма не показувалася.

#feedback {display:none;}

Відправлення повідомлення

Ваше ім’я

Ваш E-mail

Введіть повідомлення
Відправити E-mail

Тепер нам потрібна посилання, по натисненню на якій має спливати модальне вікно з нашою формою, власне виглядати так:

Зворотний зв’язок

Зверніть увагу на атрибути посилання, що href вказаний id форми, а так само клас modalbox, який так само буде використаний для ініціалізації спливаючого вікна.

Тепер сам код javascript, який і займається тим, що показує форму, і обробляє. Обробку форми ви так само робите під себе.

$(document).ready(function(){
$(“.modalbox”).fancybox();
$(“#f_contact”).submit(function(){ return false; });
$(“#f_send”).on(“click”, function(){
// тут подальші дії по обробці форми
// закриваємо вікно, як правило робити це потрібно після обробки даних
$(“#f_contact”).fadeOut(“fast”, function(){
$(this).before(“

Ваше повідомлення надіслано!

“);
setTimeout(“$.fancybox.close()”, 1000);
});
});
});

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

Додав: htmaker, 11.05.2015 р.
(8 голосів, середній: 3,50 із 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript

Коментарі

Андрій пише:
16.06.2016 у 16:44

Не підкажете як відправити цю форму з допомогою ajax, а то в JS нуль:( Заздалегідь спасибі!

Відповісти

htmaker пише:
30.06.2016 в 10:32

У місці:

// тут подальші дії по обробці форми

Додаєте код:

$.getJSON(‘ajax.php’, {
f_name: $(‘#f_name’).val(),
f_email: $(‘#f_email’).val(),
f_msg: $(‘#f_msg’).val(),
}, function(data){
// data – тут відповідь скрипта
});
…

На стороні сервера слід розмістити скрипт ajax.php — обробник даних з вашої форми на стороні сервера.

Відповісти

ігор пише:
21.07.2016 в 12:24

я не розумію
у мене форма не відправляється через рядка
$(«#f_contact»).submit(function(){ return false; });
але якщо її прибрати модальне вікно зі словами Спасибі показується на частку секунди і гасне

Відповісти

htmaker пише:
23.07.2016 у 21:21

Дана рядок відключає стандартну відправку форми, це потрібно для реалізації ajax відправлення.
См. мій коментар вище, там приклад коду для ajax запиту.

Відповісти

Костянтин пише:
24.07.2016 у 01:59

Підкажіть, як зробити так, що б після відправки форми і закриття вікна форма очищалася і при повторному натисканні на посилання «Зворотній зв’язок» знову відкривалося первісна форма (чиста)?
пробував різні варіанти (window.location.reload() або document.getElementById(«contact»).reset()) форма очищається тільки після двох натискань на посилання «Зворотній зв’язок».

Відповісти