Formular de contact modal pe css3

Formular de contact modal pe CSS3

Înainte de a proceda la analiza tuturor componentelor, am să acorde o atenție la faptul că această metodă funcționează corect în toate browserele moderne: Chrome, Firefox, Opera, Safari, la fel ca și în Internet Explorer, începând cu versiunea 9, este susținută printr-o operație stabilă a deciziei.

Cea mai interesantă, după părerea mea, este că utilizează un standard de contacte structurat în html, legat de blocul modal format în css. Chiar și așa, forma în sine este dotată cu funcții de ferestre modale folosind css3.

HTML Marcarea formularului de contact

Pentru a construi un formular, utilizați eticheta

După cum puteți vedea, nimic neobișnuit, forma ca formă, cu excepția faptului că folosiți atributul substituent pentru a scoate textul în câmpurile care dispare atunci când primesc focalizare. Cu toate acestea, în toate browserele, textul dispare în moduri diferite, unele la focalizarea (IE 10+ și Safari), în cealaltă, în prezența a cel puțin un caracter introdus (Chrome și Firefox). Ceea ce ar localiza în toate browserele în același loc, a prescris reguli speciale CSS:

Deci, fără probleme, am continuat să creăm stiluri în CSS, atât forma însăși, cât și elementele interne.

După cum am scris mai sus, formularul este executat în tonuri întunecate, câmpurile de introducere și butonul sunt evidențiate cu nuanțe mai deschise. La înregistrare s-au folosit rotunjirea colțurilor, transparența ușoară a fundalului principal și umplutura de gradient pentru butonul "trimite". Ca bază, cu unele modificări, ținând seama de modalitatea formei viitoare, a fost luată o serie de reguli și proprietăți ale CSS, o formă despre crearea căreia i-am spus mai devreme. Apropo, în același loc veți găsi descrierea formei în culori deschise și nu va fi dificil să o faceți modală.

Stilul de formă poate fi absolut orice, iar modalitatea sa este rezolvată prin adăugarea cea mai simplă a unei etichete

o anumită clasă, în exemplu, pentru a da forma ecuațiilor ferestrei pop-up, în etichetă prescrie modalitatea modală. cu care vom lucra în css.
Formularul va fi activat făcând clic pe un link sau pe un buton specific și apare în centrul paginii nu este un fundal întunecat. Fundalul de întrerupere se face ca o legătură cu clasa suprapusă. pentru a putea închide forma modală făcând clic în afara formularului, deoarece butonul de închidere nu este prevăzut în acest exemplu de realizare, nu este dificil să fixați un astfel de buton, dacă se dorește. Identificatorul id = "form1" va lega formularul și stratul de negru cu linkul de activare.

Linkul spre deschiderea formei modale poate fi orice element de pagină, element de meniu, butoane, text sau imagine, de exemplu:

Formă deschisă

strat Blackout sub formă de link-uri sunt plasate direct în fața formei, nu contează, ci pentru ca totul să fie „pus pe rafturi,“ haos în codul HTML este deja suficient si va arata astfel:

Formă deschisă

3. Formulare CSS. Toate stilurile sunt împachetate și redate într-un fișier separat stil-form.css. Puteți să-l conectați la document scriind în secțiune . sau prin copierea întregului conținut în foaia de stil principală a site-ului dvs.

Articole similare

Formulare modale în pagina dll

Pagina anterioară

Pagina următoare

Formular de contact modal pe css3