Створення модальних вікон досить затребувана необхідність, яка може на практиці виникати повсюдно для різних цілей, будь то просте інформаційне повідомлення, форма введення, або що-небудь ще. На щастя вже є готові напрацювання інших програмістів, якими можна скористатися і тим самим заощадити свій час для інших завдань. Зараз ми поговоримо про те, як можна скористатися бібліотекою 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()) форма очищається тільки після двох натискань на посилання «Зворотній зв’язок».

    Відповісти

  • Варвара пише:
    15.09.2017 у 17:35

    Здрастуйте, у разі розміщення такої форми на сторінці, куди потрапляють введені дані? Як зробити так, щоб ці дані приходили до мене на емэил?

    Відповісти

    • СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА