Първо трябва да се нулира CSS браузъра и внася допълнителни шрифтове. Отивам да се използва и Open Sans Варела кръг. са на разположение в Google Font.
Внос от Google Fonts:
Възстановяване на CSS стилове и мястото по подразбиране:
Стилове и раздел тялото HTML могат да бъдат променяни по своему, тя ще има малко влияние върху създаден формуляра за участие и изскачащ прозорец JQuery.
След това трябва да се свържете със страницата JQuery. Аз използвам линк към JQuery. но можете да използвате местна версия.
Създаване на CSS-налагане
На първо място, трябва да създадете наслагване елемент и контейнер за формуляр за вход.
Overlay добавете черен нюанс към останалата част от съдържанието на страницата, подчертавайки по този начин желаната мерна единица. Това е прост CSS-ефект. използване на позициониране и цвят на фона.
Тъй като стиловете са разделени на две основни части, аз ще ги обясня отделно.
Първо, помислете за мястото на монтиране и добавянето на цвят:
Нека разгледаме следния код:
- фон-цвят: RGBA (0,0,0, 0.25) - ви позволява да определите използването на RGBA цвят и алфа стойност алфа - е непрозрачността на цвета;
- надолу: 0 - позициониране елемент в дъното на страницата;
- лява: 0 - позициониране елемент в лявата част на страницата;
- позиция: фиксирана - чрез превъртане позицията на елемент на страницата не се променя;
- Горе: 0 - позициониране елемент в горната част;
- ширина: 100% - елемент изпълва цялата ширина на страницата.
Втората част включва flexbox CSS3. което значително опростява позициониране на елементите в контейнера. Нека да видим:
Забележка. по време на това писание не flexbox поддържа изцяло във всички основни браузъри. Ако искате да се достигне максималния брой браузъри, трябва да се използват представките:
Стилове вход панел на HTML и CSS
Сега имаме контейнер, както и че е необходимо да се постави тя позира форма за вход. Обща характеристика на тези форми с изскачащ прозорец JQuery е прозрачна граница. Ние използваме контейнер елемент за постигане на този ефект, но можете да използвате границата, за да се получи едно и също нещо:
Повечето CSS имоти са очевидни. С RGBA ценности ние отново зададете цветен фон, който дава по-красива непрозрачен ефект. граница радиус заоблени ъгли на контейнера определя форма вход.
Имотът, който се нуждае от обяснение, това подравняване-самостоятелно. тъй като тя е сравнително нова. Това се дължи на flexbox. приведе-самостоятелно определя хоризонталното разположение на елемента, и сме си поставили за привеждане в съответствие на точния център.
След това отидете на площ съдържание. До момента имаме разгледал само прозрачни среди, така че е време да се използва нещо твърдо вещество:
Ние използваме твърд бял фон, така че вместо RGBA прилага само RGB. Отстъп 24 пиксела могат да се променят по свое усмотрение.
Важна част от това правило е да се определи положението. Това е необходимо, когато се използва абсолютно позиционирани елементи във вътрешността на опаковката - това ще бъде бутон за затваряне.
Сега трябва да се направи заглавието (h3) в панела за въвеждане на:
За избор на заглавие, аз използвам черен заоблен шрифт с размер от 1.8 тях. Използването на 1,8 ги определя размера на шрифта на шрифта относно документа. Това се нарича еластичността на шрифта.
Създаване на бутон за затваряне
Преди да направите изскачащ прозорец, трябва да създадете бутон за затваряне логин формата. Това се прави по следния начин:
Ето обяснение на кода:
- фон-цвят - ние използваме приятно светло сив фон;
- граничен радиус - както ние създаваме един кръг, ние трябва да ъглови радиуси граница е 50% от височината;
- позиции: абсолютен - абсолютен бутон позициониране / препратка, но да се определи относителното позициониране на контейнера, позициите на всички елементи са определени по отношение на него;
- най - разстоянието от горната част на формата вход - REM - относителната зависимост, което е свързано с размера на шрифта;
- преход - определя анимацията за всички свойства, 400ms стойностите облекчаване;
- Точно така - разстоянието от десния край на екрана, за да форма за вход.
Във втория блок с помощта на селектора: мишката. казва на браузъра какво да се прави, когато потребителят премести курсора на мишката върху елемента. В този случай, бутонът става зелено и показалеца на мишката ще се превърне.
Създаване на формуляр за вход
Скоро ще се премине към прозорец, HTML. В същото време, под формата влизане на CSS код:
На първо място, ние определяме стила на формата на етикет. С това потребителят може да кликнете върху тях, и да стигнете до полето на съответната форма. член етикет работи директно с данните за самоличност.
Преди да направите изскачащ прозорец на HTML. ние създаваме елементите на формата за въвеждане на данни. Аз вмъкнати бокс-сянка. да иска красива вътрешния си сянка.
Използването селектор: фокус ви позволява да определите как данните ще изглеждат като входен елемент, когато потребителят е настроил свърши. Необходимо е да се докаже, че този елемент е избран.
И накрая, ние си поставихме за стил със селектор CSS: невалиден. Когато потребител въведе данни, които не съответстват на конкретен модел, входния елемент ще бъдат показани с помощта на тези стилове.
Стилове в акаунта бутон
стилове на бутоните не съдържат нищо ново:
За бутони, попитахме хубав син фон с полупрозрачни тъмен кадър. Този метод дава възможност да се не промени цвета на границата, когато се промени цвета на фона. Ние също така се създаде стандарт за бутон CSS-анимация преход при смяна на цвета на фона.
Що се отнася до бутона за затваряне, Ви молим да промените цвета на фона, когато курсора на мишката до бутона изглежда кликване.
форма влизане HTML-код
До сега, всички заинтересовани обясненията CSS стилове. Сега е време да се помисли за кратко маркиране. Включително HTML изскачащи прозорци.
Под формата на елементи на HTML 5. използва, затова се уверете тип документ е зададен правилно:
Пълен форма на HTML код запис:
При използване на този метод, трябва да поставите кода вътре елемент орган за целия сайт.
Трябва да приключи функция JQuery към функция, която се зарежда след като документът е готов. Това предотвратява забавяне:
За да създадете ефекта на прекратяването, ние използваме метод JQuery fadeToggle. Тя позволява много по-лесно, за да анимирате елементи.
Ние използваме fadeToggle когато кликнете връзки в входа. За да направите това ние ще трябва JQuery кликване събитие:
Горният код започва с натискане на функционалния елемент обвити с идентификатор LOGINLINK. За да го казвай какво да правя, когато бъде натиснат елемент, направете следното:
Използването на JQuery функция preventDefault () ви позволява да спрете комуникацията с пренасочването на потребителите. Тя осигурява функционалността за разработчиците, които могат да разчитат на страницата за вход:
С тази лесна функция ние дублира функционалността, за да затворите прозореца.
изскачащ прозорец на JS ще се уверите, че потребителят може да натиснете клавиша ESC за да затворите прозореца:
Важно е да се отбележи, че тази функция се използва в тялото, ако. Операторът проверява дали потребителят е натиснат клавиш ESC (основен код 27).
Тъй като ние не искаме на потребителя да отвори прозорец с ESC. Трябва да се провери дали прозореца на наслагване се показва или не.
Тук са всички целия JQuery код:
AJAX и HTML 5
Какво става, ако искате да направите тази форма по-добре? Можете да включите в регистрационния формуляр. Ето как това може да се направи без да се дублира код, като използвате JQuery AJAX GET заявка:
Аз създадох една нова класа на специфични формуляри и връзки към регистрация под името «overlayLink». След като потребителят кликне върху този елемент, на функцията.
Ние искаме да се свърже не правите нищо друго. Използване на preventDefault (). След това е необходимо, за да разберете коя страница искате да извлечете. Това се посочва в данни действие HTML-атрибут.
Сега ние получите кода, посочени на страници / форма или HTML изскачащи прозорци. Страницата, съответстващ на ключовата връзка, трябва да бъде в пакет Аякс / на. След това резултатът се поставя в клас елемент вход съдържание.
кода на страницата Аякс / вход-form.html ще бъде, както следва:
Връзки към наричат искане AJAX ще изглежда така:
След това можете да създадете Аякс / регистрация-form.html файл:
Обобщение и пълния код
Благодаря ви за вниманието. Днес научихме как да се направи изскачащ прозорец. Надявам се, че това ръководство е от полза. Ето и пълния код:
Превод на статията «Създаване на Popup HTML Вход Box с JQuery» приятелски екип Уеб дизайн проект от А до Я.
Свързани статии