Adaptive modális ablak pontosan a közepén
Adaptive modális ablak pontosan a közepén
Hogyan készítsünk egy teljesen adaptív modális ablakot. hogy ugyanezt a szigorúan a központban, és egyformán jól, nyilvánvaló break-up, nézte a különböző felhasználói eszközök képernyőn?
A kérdés persze érdekes, és a végrehajtási folyamatot minden izgalmas. Természetesen az elrendezés a modális ablak, ami most lesz szó, hanem a gumi, az alkalmazkodóképesség okos körökben is mutatja, a tőke a meta tagek a mobil eszközök, a média lekérdezéseket a css és egyéb kötelező „trendovannymi Bourgeois” és a sündisznó felszállni, szabványoknak.
A téma létrehozásának modális ablakok, azt vissza sokszor, leír egy eljárást a jQuery kizárólag tiszta CSS3. A példában bemutatott ma hozta össze néhány fogalom, és kap, hogy mi történt. Ne szedje ezt a módszert, mint egy útmutató a cselekvésre, hanem ez egy munkaanyag, a keresés az optimális megoldásokat.
Lásd egy élő példa, majd Nézzük egy kicsit több összetevő.
Html jelölés
Valószínűleg központosító elemek helyett a táblázat blokk asztal-sejt. könnyebb lenne használni az átalakulás, az átalakítás tulajdonság negatív százalékos értékek, de eltekintve attól a ténytől, hogy a módszer nem működik IE8 és használatát igényli előtagok, a legfontosabb, hogy zavarhatja más hatások a transzformáció, és bizonyos esetekben teszi homályos pereme a blokk és a szöveg . Bár abban az esetben, IE8, modális ablakok tiszta CSS, és így nem működik.
Annak megállapításához, a szélessége a modális egység, mint látható, azt használják a készüléket em és a maximális szélesség max-width elem. által módosított az ablak pontosabban, mint amikor szélessége:%;
Nincs további js-könyvtárak nem tud csatlakozni a munka csak a varázslatos CSS3. A modális blokk és tompítása réteg, az idő, hogy tegye le a gáz (az oldalról), via display: block;. Csavar az egyszerű animációs keresztül @keyframes. az ingatlan fényelnyelés. egy kis késés, ez vezet simán a modális ablak és blackout réteg nyitott állapotban. Azok, akik a vágy, akkor nyugodtan kísérletezni a jó példákat a neten elég.
Mind hálás, ha a támogatás a projekt - hozzátéve egy blogot AdBlock kivételek, és osztoznak a linket egy rekord a társadalmi hálózatok: