Modális kapcsolatfelvételi űrlap a css3-on

előző ◈ a következő

Modális kapcsolatfelvételi űrlap a CSS3-on


Modális kapcsolatfelvételi űrlap a css3-on

Mielőtt elkezdenénk elemezni az összes összetevőt, felhívom a figyelmet arra, hogy ez a módszer minden modern böngészőben jól működik: a Chrome, a Firefox, az Opera, a Safari, az Internet Explorerben is, mivel a 9. verzió óta támogatja ezt a megoldást.
A legérdekesebb, véleményem szerint az, hogy a szabványos, strukturált html formában kapcsolatok, kötve a modális blokk formában css. Még ha nem is így van, maga az űrlap rendelkezik modális ablakfüggvényekkel a css3 használatával.

A kapcsolatfelvételi űrlap HTML-jelölése

Formanyomtatvány létrehozásához használja a címkét

belső elemekkel és

Amint láthatja, semmi különös, az űrlap formában, kivéve, hogy a helyőrző attribútumot használhatja olyan mezőkön, amelyek eltűnnek a fókuszáláskor. Azonban minden böngészőben, szöveg eltűnik különböző módokon, a hangsúly (IE 10+ és Safari), a másik jelenlétében legalább egy karaktert be (Chrome és Firefox). A placeholder minden böngészőben egyaránt működött, speciális css szabályokat írt elő:

Szóval, zökkenőmentesen folytattunk stílusokat a CSS-ben, mind az űrlapon, mind a belső elemein.

Ahogy fent írtam, az űrlap sötét hangokból kerül végrehajtásra, a beviteli mezők és a gomb világosabb árnyalatokkal kiemelve. A regisztrációnál a kerekítés sarkai, a fő háttér és a gradiens kitöltése egyszerűen átlátható a "küldés" gombra. Alapvetően, néhány módosítással, figyelembe véve a jövő formájának módját, a css szabályainak és tulajdonságainak egy sorát, egy olyan formát hoztak, amelynek létrehozásáról korábban említettem. By the way, ugyanazon a helyen megtalálja a forma leírását világos színekben, és nem lesz nehéz modalizálni.


Az űrlap stílusa teljesen lehet bármi, és a modalitás megoldható a címke legegyszerűbb hozzáadásával

egy bizonyos osztály, a példában, hogy megjelenítse a felbukkanó ablak funkcióinak formáját írja elő az osztálymódot. amellyel css-en dolgozunk.
Az űrlap aktiválódik egy adott linkre vagy gombra kattintva, és az oldal közepén megjelenő nem sötét háttér. Az áramkimaradás hátterét összekapcsolják az overlay osztálysal. annak érdekében, hogy az űrlapon kívülre kattintva bezárja a modális űrlapot, mivel a zárógombot ebben a kiviteli alakban nem írják elő, akkor nem nehéz rögzíteni az ilyen gombot. Az azonosító id = "form1" kapcsolja az űrlapot és a blackout réteget az aktiváló hivatkozással.

A modális formanyomtatvány megnyitásához vezető link lehet bármilyen oldalelem, menüpont, gomb, szöveg vagy kép, például:

Nyitott űrlap

Az összekapcsolás formájában elhelyezett áramkimaradást közvetlenül a forma elé helyezik, nem elvileg, hanem annak érdekében, hogy mindent el lehessen terjeszteni a polcokon, elegendő az html kód káosza, és így fog kinézni:

Nyitott űrlap

3. CSS formák. Minden stílus csomagolva van és külön stílus-form.css fájlban jelenik meg. A szekcióba írhatja a dokumentumhoz . vagy az összes tartalmát átmásolja a webhely fő stíluslapjára.

Kapcsolódó cikkek

előző ◈ a következő