A html és a jquery oldalon létrehozzuk a bejelentkezési űrlap előugró ablakát, a webhely elrendezését
Először vissza kell állítania a CSS böngészőt, és be kell importálnia további betűtípusokat. A Open Sans és a Varela Round-t fogom használni. amelyek elérhetők a Google betűtípusban.
Betűkészletek importálása a Google számára:
A CSS és a webhelystílusok alapértelmezett visszaállítása:
A test és a HTML szakaszok stílusai saját belátásuk szerint módosíthatók, ez kevés hatással lesz a létrehozott beviteli űrlapra és a jQuery felugró ablakára.
Ezután kapcsolódnia kell a jQuery oldalhoz. JQuery-ra hivatkozást használok. de a helyi verziót használhatja.
CSS átfedés létrehozása
Először is létre kell hoznia egy overlay elemet és egy tárolót a beviteli űrlaphoz.
Az átfedés fekete színt ad az oldal tartalmának többi részéhez, ezzel kiemelve a kívánt blokkot. Ez egy egyszerű CSS-hatás. pozícionálás és háttérszín használatával.
Mivel a stílusok két fő részre tagolódnak, külön megmagyarázom azokat.
Először fontolja meg a pozícionálás és a szín hozzáadása:
Elemezzük ezt a kódot:
- background-color: rgba (0,0,0, .25) - az RGBA használatával megadhatja a színes és alfa értéket, az alfa a szín opacitása;
- alsó: 0 - helyezze el az elemet az oldal alján;
- balra: 0 - helyezze az elemet az oldal bal oldalára;
- pozíció: rögzített - az oldal görgetése közben az elem helyzete nem változik;
- top: 0 - helyezze el az elemet az oldal tetején;
- szélesség: 100% - az elem kitölti az oldal teljes szélességét.
A második rész a flexbox CSS3-ot tartalmazza. ami nagymértékben leegyszerűsíti az elemek elhelyezését a tartály belsejében. Lássuk:
Megjegyzés. Az írás idején a flexbox nem volt teljes mértékben támogatott minden nagyobb böngészőben. Ha a böngészők maximális számát szeretné lefedni, előtagokat kell használnia:
Beviteli panel stílusok a HTML és a CSS számára
Most van egy konténerünk, és be kell helyezzük a létrehozott bejelentkezési űrlapot. A hasonló formák közös jellemzője a jQuery felbukkanó ablakban félig átlátszó határ. Ezt a hatást a konténerelem használatával használjuk, de a határt használhatjuk ugyanazt a célra:
A legtöbb CSS tulajdonság nyilvánvaló. Az rgba érték használatával ismét beállítjuk a háttérszínt, ami kellemes áttetsző hatást eredményez. A határ-sugár meghatározza a beviteli alak konténer lekerekített sarkát.
Az a tulajdonság, amelyhez magyarázat szükséges, igazodik az önmagához. mert ez teljesen új. Ennek oka a flexbox. align-self határozza meg az elem vízszintes illesztését, és a beállítást pontosan a középpontban állítottuk be.
Ezután lépjen a tartalom területre. Eddig csak félig átlátszó háttérrel foglalkoztak, így itt az ideje, hogy valami szilárdat használjunk:
Szilárd fehér háttérrel dolgozunk, ezért csak rgb-t használtunk az rgba helyett. A 24 képpont behúzása tetszés szerint módosítható.
E szabály fontos része a pozíció meghatározása. Ez akkor szükséges, ha a tartály belsejében teljesen elhelyezett elemeket használ - ez lesz a záró gomb.
Most be kell hoznia egy fejlécet (h3) a bemeneti panel belsejében:
A cím kiválasztásához egy fekete kerek betűtípust használok, melynek mérete 1,8 em. Az 1.8 em használatával a betűméret a dokumentum betűtípusához viszonyítva állítható be. Ezt nevezik a betű rugalmasságának.
Hozzon létre egy bezárási gombot
Mielőtt felugró ablakot készítene, létre kell hoznia egy gombot a bejelentkezési űrlap bezárásához. Ez a következőképpen történik:
Itt van a kód magyarázata:
- háttérszín - szép, világosszürke hátteret használunk;
- határ-sugár - mi pedig keretet hozunk létre, a határ sarkainak görbületi sugara a magasság 50% -a;
- pozíció: abszolút - a gomb / összekötő abszolút pozícionálása, de mivel a relatív pozícionálás a tartályra van beállítva, az összes elem pozíciója hozzá van rendelve;
- top - a beviteli űrlap tetejétől való távolság - rem - a betűmérettel kapcsolatos relatív függőség;
- átmenet - állítja be az animációt minden tulajdonságra, 400ms-os könnyítést használ;
- jobbra - a képernyő jobb szélétől a bemeneti űrlapig terjedő távolság.
A második blokk a választót használja: lebegés. Megmondja a böngészőnek, mit kell tennie, amikor a felhasználó lebeg az elem fölé. Ebben az esetben a gomb zöld színűvé válik, és az egérmutató megváltoztatja megjelenését.
A bejelentkezési űrlap létrehozása
Hamarosan továbblépünk a HTML előugró ablakba. Időközben a beviteli űrlap CSS:
Először meghatároztuk az űrlapcímkék stílusait. Ennek köszönhetően a felhasználó megnyomhatja a szöveget, és megkeresheti a megfelelő űrlapmezőt. A címkeelem közvetlenül az adatazonosítóval működik.
Mielőtt felugrik a HTML-ablakban. létrehozunk adatbeviteli elemeket az űrlaphoz. Megadtam egy beágyazott doboz árnyékát. Beállítani egy szép belső árnyékot nekik.
A választó segítségével: a fókusz lehetővé teszi, hogy meghatározza, hogy a bejegyzéselem hogyan néz ki, amikor a felhasználó elhelyezte a kurzort. Meg kell mutatni, hogy az elem jelenleg ki van választva.
Végül a stílusokat a CSS választó segítségével állítjuk be: érvénytelen. Amikor egy felhasználó olyan adatokat ad meg, amelyek nem felelnek meg egy adott mintának, akkor a beviteli elem megjelenik ezekkel a stílusokkal.
Bejelentkezés gomb stílusok
A gomb stílusai nem tartalmaznak semmi újat:
A gombhoz egy szép, kék háttér készült, áttetsző, sötét keretben. Ez a módszer lehetővé teszi, hogy ne változtassa meg a határszínt a háttérszín megváltoztatásakor. A háttérszín megváltoztatásakor a standard CSS átmeneti animáció gombját is beállítjuk.
Ami az ablak bezárás gombját illeti, a háttérszín megváltoztatását az egérkurzor mozgatásával állítjuk be úgy, hogy a gomb kinevezhető legyen.
Beviteli űrlap HTML
Eddig a CSS-stílusokhoz kapcsolódó összes magyarázat. Most itt az ideje, hogy röviden megnézzük a jelölést. Beleértve a HTML-előugró ablakot.
Az űrlap HTML elemeket használ 5. ezért győződjön meg róla, hogy a dokktípus helyesen van beállítva:
A bejelentkezési űrlap teljes HTML-kódja:
Ha ezt a módszert használja az egész webhelyen, be kell helyeznie a kódot a testelem belsejébe.
A jQuery függvényt olyan dokumentumfájlba kell beágyazni, amely a dokumentum elkészülte után töltődik be. Ez megakadályozza a lassítást:
Feloldódási hatás létrehozásához a jQuery fadeToggle módszert használjuk. Sokkal könnyebb elemeket animálni.
A bejelentkezési linkre kattintva fadeToggle-t használunk. Ehhez szükségünk van a jQuery kattintás eseményre:
A fenti kód elindítja a beágyazott függvényt, amikor egy elemre kattint a loginLink azonosítóval. Hogy elmondja neki, mit kell tennie az elem kattintásakor, tegye a következőket:
A jQuery-funkció használata preventDefault () lehetővé teszi a kommunikáció és a felhasználó átirányítását. Ez olyan funkciókat biztosít a fejlesztőknek, akik hivatkozhatnak a bejelentkezési oldalon:
Ezzel az egyszerű funkcióval duplikáljuk a funkciókat az ablak bezárásához.
A JS ablakban állítsa be úgy, hogy a felhasználó megnyomja az ESC billentyűt az ablak bezárásához:
Fontos megjegyezni, hogy ezt a funkciót az if. A kezelő ellenőrzi, hogy a felhasználó megnyomta-e az ESC gombot (27-es kód).
Mivel nem szeretnénk, hogy a felhasználó megnyissa az ablakot az ESC billentyűvel. Ellenőriznie kell, hogy a fedvényablak megjelenik-e vagy sem.
Itt van az összes jQuery kód:
AJAX és HTML 5
Mi van, ha még jobb formát akarsz tenni? Beillesztheti a regisztrációs űrlapot. A következőképpen kell eljárni: a JQuery AJAX GET lekérdezéssel történő duplikálás nélkül:
Készítettem egy új osztályt a bejelentkezési űrlaphoz és egy regisztrációs linket, amelyet "overlayLink" -nek hívtak. Miután a felhasználó rákattint erre az elemre, elindul a funkció.
Azt akarjuk, hogy a linkek ne csináljanak semmit. Ehhez a preventDefault () függvényt használjuk. Ezután meg kell tudnia, melyik oldalt kell kitörölnie. Ezt a HTML attribútum adataktiválás jelzi.
Most megkapjuk a megadott oldal / űrlap kódját vagy a HTML-előugró ablakot. A kattintott linknek megfelelő oldalnak az ajax / csomagban kell lennie. Ezután az eredmény az osztályba tartozó bejelentkezési tartalomba kerül.
Az ajax / login-form.html oldal kódja így fog kinézni:
Az AJAX kérés megadására szolgáló hivatkozások így fognak kinézni:
Ezután létrehozhatja az ajax / registration-form.html fájlt:
Következtetés és teljes kód
Köszönöm a figyelmet. Ma megtanultuk, hogyan készítsünk egy felugró ablakot. Remélem, ez az útmutató hasznosnak bizonyult. Itt van a teljes kód:
Az "A populáció HTML-belépő dobozának létrehozása jQuery" c. Cikk fordításával az A-tól Z-ig terjedő helyszín-építés projektjének barátságos csapata.