Как да си направим форма за обратна връзка в изскачащ прозорец

Tags: форма, модален прозорец, изскачащ прозорец

В тази статия ще разгледаме най-лесният начин за създаване на модален прозорец с сенчести фон, в рамките на което е форма на обратна връзка.

За да започнете структура на файл:

index.html - основен оформление файл
CSS / template.css - стил файл в специална папка
JS / popup.js - файл със скриптове на нашия изскачащ прозорец

Тъй като ние използваме JQuery библиотеката. не забравяйте да го включите в index.html.

Ще разгледаме само един начин да се създаде изскачащи форми за обратна връзка, по наше мнение, най-простите и изисква почти никакви скриптове.

Идеята е това. Първоначално, ние ще блокира, че до края на страницата ще бъде на върха на, в рамките на който е на блока, отговорен за затъмнен фон и блок с формата за обратна връзка. Основният модул е скрит от дисплея. няма. Чрез натискане на бутона, показващ формата за обратна връзка, че постепенно ще се появи, когато кликнете върху затъмнена фон, просто избледнява постепенно.

Ние правим празен HTML -razmetki:

Следващата стъпка - да се подготви стилове файлови задават основните класове изскачащи задължителни параметри и добавят някои красота:

И добави доста JS -code в popup.js:

пример за резултата можете да видите на страницата демо:

Източник код примери за изтегляне на линка по-долу:

Добър ден. Обяснете начинаещ програмист. Аз имам този сценарий не работи. И аз не разбирам как тя ще работи, ако не е описано събитие, когато е натиснат клавиш. Или все пак аз не съм много компетентен по този въпрос.
$ ( "Show_popup.) Щракнете (функция showPopup () $ (" изскачащи ".) FadeIn (800) .. // Бавни Извежда изображенията
>)
по този начин си функция, за да работят. Само все още трябва да се даде на бутона клас

Здравейте, вие сте абсолютно прав, ще видим един пример за демонстрацията не е копирали изцяло, но в нашата версия, ние добавяме бутон не е класа и OnClick приписват на параметъра "showPopup ();"

Нищо не се случва. Помощ !! Точно тази форма е необходимо, тъй като може !! & изтегляне и копирани от страницата, е да не го отваря. Аз не JS bumbum. Ако хвърлят на имейла, ще съм много благодарен. Благодаря ви !!