Ние правим vsplvayuschee прозорец
О, тези прозорци ...
Със сигурност всеки от вас поне веднъж, в интернет, се запознах с изскачащи прозорци. Не, не и тези, които се отварят в нов прозорец или таб на браузъра, както и тези, които се появяват на текущата страница.
Давай по същество ...
В тази статия, ние ще си помисля как да се приложи механизмът на изскачащи прозорци, и да го използвате в своя проект.
план за действие
- Създаване на HTML структура на нашите прозорци
- Стайлинг с CSS3
- Нека дадем на движението, като се използва JQuery
прощални думи
Ще създадем кутия структура (HTML), го скрие от потребителя (СГО) и при определени условия (събития) показва на страницата (JQuery).
Планирайте предварително на точки
Преди да започнете да създавате HTML структура на прозорците ни, ще трябва да реши това, което искаме в този прозорец, за да представи на нашите потребители.
Изборът ми падна върху форма на потребители абонамент.
Стъпка 1. Създаване на HTML структура на нашите прозорци
Нашата Popup прозорец се състои от три основни части: PP-заглавни - района на хедър, PP-съдържание - основната част, стр-Footer - в долната част на прозореца, под формата на абонамент.
Напълнете изскачащ прозорец съдържание:
Обърнете внимание на
Това устройство ще направи прозореца на браузъра си запълни полупрозрачни сив фон.
Стъпка 2. списък стиловете за изскачащия прозорец нагоре
Центриране на прозореца ни по отношение на прозореца на браузъра и да се скрият в краищата на горната граница. Ние дефинираме основните елементи и размерите стил FontAwesome икони
Нека дадем на движението, като се използва JQuery
Тук ние не крием прозорец го позициониране до височината на блока и анимирате гладка външния му вид при зареждането на страницата
Тук е толкова прост пример се оказа.
Ако този пример е свързан с случай на оттегляне на курсора на мишката в прозореца на страница, и то обикновено се случва, когато се опитате да затворите сайта, е възможно да се сключи такъв прозорец с призив към посетителите да останат на страницата, като в замяна оферта (информация).
Можете също така да се свърже с бисквитки и да издаде съобщение за действието на първите посетен от сайта.
В кратки опции, за да се прилага на тегло!