bejáratModális ablak css űrlappal. Hogyan készítsünk modális ablakot HTML5-ben és CSS3-ban
Ebben a leckében nem árulok el titkot tapasztalt tervezők és css-guruk számára, de ez a cikk hasznos lesz a kezdőknek. itt tanulhatja meg, hogyan hozhat létre előugró ablakokat a teljes webhelyén.Leggyakrabban az ilyen ablakok bizonyos műveletek végrehajtása után jelennek meg az oldalon, például a felhasználó rákattint a „Visszahívás kérése” hivatkozásra, és egy megrendelőlap jelenik meg előtte.
Nagyon kényelmes a PopUp ablakok használata az ajax-szal együtt, de ez egy másik lecke témája.
Egyre több webes forrás kezd megjelenni a weben, amelyek PopUp pop-upokat használnak. Példaként mindenki tudja. közösségi hálózatok... A képernyőképekből minden szükségtelen adatot eltávolítottunk.
Kapcsolatban áll
Azt hiszem, elég okunk van arra, hogy elkezdjük tanulmányozni a kérdést: hogyan készítsünk előugró ablakot a webhelyünkön.
Problémanyilatkozat (TOR)
Létre kell hoznia egy előugró ablakot egy sötétítő képernyővel a teljes webhely tetején.Megoldás
1. módszer
html
css
* (betűcsalád: Areal;) .b-tároló (szélesség: 200px; magasság: 150px; háttérszín: #cc; margó: 0px automatikus; kitöltés: 10px; betűméret: 30px; szín: #fff;) .b-popup (szélesség: 100%; magasság: 2000 képpont; háttérszín: rgba (0,0,0,0,5); túlcsordulás: rejtett; pozíció: rögzített; felső: 0px;) .b-popup .b-popup -tartalom (margó: 40px automatikus 0px automatikus; szélesség: 100px; magasság: 40px; kitöltés: 10px; háttérszín: # c5c5c5; szegélysugár: 5px; doboz-árnyék: 0px 0px 10px # 000;)Eredmény:
Nagyon gyakran javasolt a következők használata:
Pozíció: abszolút;
Igen, az eredmény ugyanaz, de mivel az "árnyékoló" blokk magasságát beállítottuk, görgetősávok jelennek meg. Ezért ez a módszer nem megfelelő.
2. módszer
Ez a módszer nem különbözik drámaian az 1. módszertől, de kényelmesebbnek találom.HTML (változatlan)
Css
* (betűcsalád: Areal;) .b-tároló (szélesség: 200px; magasság: 150px; háttérszín: #cc; margó: 0px automatikus; kitöltés: 10px; betűméret: 30px; szín: #fff;) .b-popup (szélesség: 100%; min-magasság: 100%; háttérszín: rgba (0,0,0,0,5); túlcsordulás: rejtett; pozíció: rögzített; felső: 0px;) .b-popup. b-popup-tartalom (margó: 40px automatikus 0px automatikus; szélesség: 100px; magasság: 40px; kitöltés: 10px; háttérszín: # c5c5c5; szegélysugár: 5px; doboz-árnyék: 0px 0px 10px # 000;)Az eredmény hasonló
Az ingatlannak köszönhetően: min-magasság: 100%; blokkunk "sötétítése" 100%-os szélességet kapott és minimális magasság a képernyő 100%-ában.Az egyetlen hátránya ez a módszer az, hogy a internet böngésző csak a 8.0-s verzió óta támogatja ezt a tulajdonságot.
Varázslat hozzáadása a Jqueryhez
Most adjunk hozzá linkeket a felugró ablakunk elrejtéséhez/megjelenítéséhez.Ehhez csatlakoztatnia kell a JQuery könyvtárat és egy kis szkriptet:
A HTML-t is frissíteni kell:
Eredmény
Most, amikor az oldal betöltődik, a PopUp eltűnik.Az eredményt itt láthatja.
Üdvözlök mindenkit, elmesélek egy nagyon kényelmes dolgot, az ún modális ablak, kitaláljuk, hogyan készítsünk modális ablakot? Sokan nem értik, mi ez, megpróbálom egy Ön által értett nyelven elmagyarázni, más szóval - ez egy felugró ablak, amikor egy gombra vagy szövegre kattint.
Ezen az ablakon belül bármilyen információ lehet (videó, kép, kód stb.) Most kezdtem el jobban használni a modális ablakot, mivel van olyan anyag amit be kell engedni, hogy ne jelenjen meg az oldalon, de mondjuk volt kép, rákattintva felugrik egy ablak és információ.
Nemrég csináltam ezt az egyik oldalon, beszúrtam egy képet a főoldalra, nem is egy képet, hanem egy képernyőképet egy YouTube videóból, és amikor rákattintottam, felugrik egy ablak, ahol a videó látható. Ilyen ablakra a játékkal ellátott oldalamon is látható egy példa, az elv ugyanaz, a képre kattintva felugrik egy ablak a játékkal. Ezt azért tettem, mert a játék bővítése szélesebb, mint a tartalmi rovatom, így találtam egy ilyen kiutat a helyzetből.
Vegyünk egy modális ablakot css-ben, hogy ne csapjuk be a fejünket, stílusokat fogunk használni, azaz stílusokat ír a főfájlba, a kódot pedig az ablakunkba, mindent részletesen átgondolunk, mit és hogyan.
Modális ablak css-ben, modális ablak készítése
Az első dolog, amire szükségünk van, az a stílusok, másolja ki a teljes kódot stílusokkal, ami lent található, és illessze be a fő stílusfájlba, azaz a style.css-be.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | ... Ablak (pozíció: rögzített; betűcsalád: Arial, Helvetica, sans-serif; felül: 0; jobbra: 0; lent: 0; balra: 0; háttér: rgba (0, 0, 0, 0,7); z- index : 99999; - webkit-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; - moz-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; kijelző: nincs; mutató-események: nincs;). Ablak: cél (megjelenítés: blokk; mutató-események: automatikus;). Ablak> div (szélesség: 460 képpont; pozíció: relatív; margó: 10% automatikus; kitöltés: 30px 10px 10px; szegélysugár: 10px; háttér: #fff; doboz árnyéka: 0px 0px 20px 2px;). bezár (háttér: # cc3300; szín: #FFFFFF; vonalmagasság: 25 képpont; pozíció: abszolút; jobbra: - 12 képpont; szöveg - igazítás: középre; felül: - 10 képpont; szélesség: 24 képpont; szöveg - díszítés: nincs; font- súly: félkövér; - webkit - keret - sugár: 12 képpont; - moz - szegély - sugár: 12 képpont; szegély - sugár: 12 képpont; - moz - doboz - árnyék: 1px 1px 3px # 000; - webkit - doboz - árnyék: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000;). bezárás: lebeg (háttér: # 990000;) |
Ablak (pozíció: rögzített; betűcsalád: Arial, Helvetica, sans-serif; felül: 0; jobb: 0; lent: 0; bal: 0; háttér: rgba (0,0,0,0,7); z-index : 99999; -webkit-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; -moz-átmenet: átlátszatlanság 400 ms-os könnyű beillesztés; átmenet: átlátszatlanság 400 ms-os könnyű beillesztés; kijelző: nincs; mutató-események: nincs; Ablak: cél (megjelenítés) : blokk; mutató-események: automatikus;). Ablak> div (szélesség: 460 képpont; pozíció: relatív; margó: 10% automatikus; kitöltés: 30 képpont 10 képpont 10 képpont; szegélysugár: 10 képpont; háttér: #fff; doboz árnyéka: 0px 0px 20px 2px;) .close (háttér: # cc3300; szín: #FFFFFF; vonalmagasság: 25px; pozíció: abszolút; jobbra: -12px; szövegigazítás: középre; felül: -10px; szélesség: 24px; szöveg -dekoráció: nincs; betűsúly: félkövér; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit -box-shadow: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000;) .bezárás: lebeg (háttér: # 990000;)
Mentés, játszhat a stílusokkal, és valami szebbet készíthet, megváltoztathatja a hátteret, készíthet egy másik keretet stb. Nyissa meg azt az oldalt, ahol meg szeretné jeleníteni ezt az ablakot, és illessze be a következő kódot:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" >Gomb < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "Bezárás" class = "close" >xAz ablak tartalma itt lesz |
Gomb
Most elemezzük egy kicsit, hogy mi van benne, változtatni kell. Hol van kiírva "Gomb" oda beszúrhatsz, mint egy képet és szöveget, amit akarsz, vagyis ha rákattintasz, megnyílik egy ablak. Ahol le van írva "Itt lesz az ablak tartalma"írja be, amit szeretne látni a felugró ablakban, lényegében ennyi.
HÍREK!
Nos, az utóhíreknél, mint mindig, most is gyakorivá váltam a hírekkel)) Csináltam magamnak egy kis oldalt Partnerprogram, formában mindenkit bepúderek, hogy menjen oda, hátha valaki ad még érdekesebb tanácsokat, pl., hogy adjunk hozzá valamit, hát tudod miről beszélek. Még vannak gondolatok vele kapcsolatban, hogy hozzak fel velem egy videót, esetleg egy instrukciót, nos, valami ilyesmit, Általában várom a kommenteket!
Ismét rátérek a modális (pop-up) ablakok létrehozásának témájára. Az utóbbi időben egyre jobban érdekelnek a pop-upok futtatásának különféle technikái javascript használata nélkül, jQuery bővítmények stb. Nagyobb érdeklődésre tarthat számot a tiszta stílusok alkalmazásának lehetősége és az új CSS3-szolgáltatásokban rejlő kimeríthetetlen lehetőségek.
Néhány tekintélyes burzsoázia fejlesztései alapján ravasz srácok ebben a tekintetben, jó eredmények születnek a modális ablakok CSS3 használatával történő létrehozása terén. A feladat mindenekelőtt a végeredmény többé-kevésbé stabil, böngészők közötti kompatibilitásának elérése, és természetesen a legkisebb veszteséggel a teljes kódmennyiség csökkentése mind HTML-ben, mind CSS-ben, hogy megkönnyíti a sokat szenvedett webhely-készítők életét.
Ennek eredményeként már ebben a tekintetben ma látni fogjuk, és egyúttal megtanuljuk, hogyan készítsünk felugró modális ablakokat a CSS3 "varázslatával".
Kezdésként mindazok, akiket ez a téma érdekel, megnézhet egy példát a modális ablakok működésére különböző verziókban, és letöltheti a forrásokat:
Ezt a leckét nem szabad cselekvési útmutatónak tekintenie, mivel ebben a szakaszban csak a modern böngészőkben lehetett magabiztos támogatást elérni ( IE 9+, Firefox, Safari, Opera, Chrome). Tekintettel arra, hogy az IE böngésző ősi verziói még mindig meglehetősen népszerűek a felhasználók körében, javaslom, hogy ezt a cikket tekintsék egyfajta kísérletnek, a CSS3 képességeinek bemutatására.
Ok, most menjünk közvetlenül magához az elrendezéshez. html kódotés modális ablakunk stílusa css3 segítségével)))
1. lépés: HTML
Először is hozzunk létre néhány alapvető HTML-jelölést. Amint látható, az alapfelépítés meglehetősen egyszerű, ha figyelembe vesszük a modálisok és a gombok (hivatkozások) html-jelölését az aktiváláshoz. Minden modális ablak nem más, mint egy szabványos konténer
Nyitott ablak 1 Nyissa meg az ablakot 2 Videó az ablakban 3 Fénykép a 4. ablakban
Cím
Illessze be a videót ide vagy bármelyikből harmadik féltől származó erőforrás, YouTube, Vimeo stb. (iframe, beágyazás) ...
A fenti kódpéldában az érthetőség kedvéért rövid magyarázatokat írtam a modális ablakok konténereibe. Neked marad analógia szerint, in div konténer felugró ablakban helyezze el bármely tartalmát, legyen az egyszerű szöveg, képek vagy videók bármely harmadik féltől származó forrásból, YouTube-ról, Vimeóról stb. A modális ablakok hívására szolgáló hivatkozásokat szöveggé alakíthatjuk, vagy megtervezhetjük csodálatos, színátmenetes gombok formájában, mint a példában.
2. lépés. CSS
A következő lépés, ez a legérdekesebb, fontos, hogy előkészítsük az összes szükséges stílust a modális ablakunkhoz, rendezzük el megjelenésés adjunk hozzá funkciókat. Kihagytam az oldal alapstílusait, hogy ne legyen zavaró, és az érthetőség kedvéért megjegyzésekkel kiegészítettem néhány szabályt:
/ * Alapvető sötétítési és modális rétegstílusok * / .overlay (fent: 0; jobbra: 0; lent: 0; balra: 0; z-index: 1; láthatóság: rejtett; / * sötétítő háttér * / háttérszín: rgba (0, 0, 0, 0,7); átlátszatlanság: 0; pozíció: rögzített; / * rögzített pozicionálás * / kurzor: alapértelmezett; / * kurzor típusa * / -webkit-transition: opacity .5s; -moz-transition: átlátszatlanság . 5s; -ms-transition: opacity .5s; -o-transition: opacitás .5s; átmenet: opacitás .5s;) .overlay: target (láthatóság: látható; opacitás: 1;) .is-image (felső: 0 ; jobbra: 0; alsó: 0; balra: 0; kijelző: blokk; margó: auto; szélesség: 100%; magasság: auto; / * a soron belüli képek sarkainak lekerekítése * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * beágyazott m-media elemek, keretek * / beágyazás, iframe (fent: 0; jobbra: 0; alul: 0; bal : 0; kijelző: blokk; margó: automatikus; minimális szélesség: 320 képpont; maximális szélesség: 600 képpont; szélesség: 100%;) .popup h1 (/ * címsor 1 * / szín: # 008000; szövegigazítás: balra szöveg-árnyék: 0 1p x 3px rgba (0,0,0, .3); font: 24px "Trebuchet MS", Helvetica, sans-serif; betűsúly: félkövér; ) .popup h2 (/ * 2. címsor * / szín: # 008000; szövegigazítás: balra; szöveg-árnyék: 0 1px 3px rgba (0,0,0, .3); betűtípus: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Űrlap modális ablakstílusok *** / .popup (fent: 0; jobbra: 0; balra: 0; betűméret: 14px; z-index: 10; megjelenítés: blokk; láthatóság : rejtett; margó: 0 automatikus; szélesség: 90%; minimális szélesség: 320 képpont; maximális szélesség: 600 képpont; / * rögzített pozicionálás, az ablak stabil görgetéskor * / pozíció: rögzített; kitöltés: 15 képpont; szegély: 1 képpont tömör # 383838 ; / * sarkok lekerekítése * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * külső box-shadow * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0,8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0,8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0,8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0,8); box-shadow: 0px 0px 6px rgba ( 0, 0, 0, 0,8); / * az ablak teljes átlátszósága, kattintásra megjelenik * / átlátszatlanság: 0; / * átmeneti hatás (megjelenik) * / -webkit-transiti on: minden egyszerű .5s; -moz-transition: minden egyszerű .5s; -ms-transition: minden egyszerű .5s; -o-átmenet: minden egyszerű .5s; átmenet: minden egyszerű .5s; ) / * engedélyezze az ablak megjelenését és sötétítse a hátteret * / .overlay: target + .popup (felső: 20%; / * az ablak helyzete az oldal tetejétől, amikor megjelenik * / láthatóság: látható; átlátszatlanság: 1; / * átlátszóság eltávolítása * /) / * a bezárás gombból * / .close (pozíció: abszolút; felül: -10px; jobbra: -10px; kitöltés: 0; szélesség: 20px; magasság: 20px; szegély: 2px tömör #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; háttérszín: rgba (61, 61, 61, 0. nyolc); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; szöveg igazítása: középre; szöveg-dekoráció: nincs; betűsúly: félkövér; vonalmagasság: 20 képpont; / * beállított értékek és átmeneti hatás a lebegésnél * / -webkit-transition: minden egyszerű .8s; -moz-transition: minden egyszerű .8s; -ms-transition: minden egyszerű .8s; -o-átmenet: minden egyszerű .8s; átmenet: minden könnyű .8s; ) .close: előtt (szín: rgba (255, 255, 255, 0,9); tartalom: "X"; szöveg-árnyék: 0 -1 képpont rgba (0, 0, 0, 0,9); betűméret: 12 képpont;) .close: hover (háttérszín: rgba (252, 20, 0, 0,8); / * csavarja el a gombot a lebegtetésen * / -webkit-transform: forgatás (360 fok); -moz-transform: forgatás (360 fok); - ms -transform: forgatás (360 fok); -o-transform: forgatás (360 fok); transzformáció: forgatás (360 fok);) / * nem kötelező mellékletek hozzáadásakor * / .popup p, .popup div (margin-bottom: 10px;)
Amint látjátok, kedves barátaim, minden nagyon egyszerű, és nincs szükség felesleges rendetlenségre. Ha mindent helyesen csinálsz, akkor egy csodálatos modális felugró ablak kerül az arzenálodba, amelyben bármilyen tartalmat elhelyezhetsz, legyen szó szöveges tartalomról, fényképekről, különféle regisztrációs űrlapokról, ill. Visszacsatolás, vagy bármely harmadik féltől származó videót. Kísérletezzen a paraméterekkel, módosítsa az ablakot szíve szerint, és ha lehetséges, ossza meg bevált gyakorlatait, valamint a hirtelen felmerülő problémákat a megjegyzésekben.
A modálok egy gyakran használt eszköz a webmesterek arzenáljában. Nagyon jól alkalmas nagyszámú feladat megoldására, például regisztrációs űrlapok, hirdetési egységek, üzenetek megjelenítésére stb.
De a fontos hely ellenére információs támogatás projektben a modálokat általában JavaScriptben implementálják, ami problémákat okozhat a funkcionalitás bővítése vagy a visszafelé kompatibilitás biztosítása során.
A HTML5 és a CSS3 lehetővé teszi a modálisok rendkívüli egyszerű létrehozását.
HTML jelölés
A modális létrehozásának első lépése az egyszerű és hatékony jelölés:
Nyissa meg a modális ablakot
Egy div elem belsejében a modális tartalma el van helyezve. Az ablak bezárásához egy hivatkozást is meg kell szerveznie. Például tegyünk fel egy egyszerű címsort és néhány bekezdést. A példánk teljes jelölése így néz ki:
Nyissa meg a modális ablakot
Modális ablak
Példa egy egyszerű modális ablakra, amely CSS3 használatával hozható létre.
Az üzenetek megjelenítésétől a regisztrációs űrlapig széles körben használható.
Stílusok
Hozzon létre egy osztályt modalDialogés elkezdjük formálni a megjelenést:
ModalDialog (pozíció: rögzített; betűcsalád: Arial, Helvetica, sans-serif; felül: 0; jobb: 0; lent: 0; bal: 0; háttér: rgba (0,0,0,0,8); z-index : 99999; -webkit-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; -moz-átmenet: átlátszatlanság 400 ms-os könnyű beillesztés; átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; kijelző: nincs; mutató-események: nincs;)
Az ablakunk fix pozíciójú lesz, azaz lefelé mozog, ha az ablak nyitva tartása mellett görgetjük az oldalt. Ezenkívül a fekete hátterünk kitágul, hogy kitöltse a teljes képernyőt.
A háttér enyhén átlátszó lesz, és a tulajdonság használatával az összes többi elem fölé is kerül. z-index.
Végül átmeneteket állítunk be a modális ablakunk megjelenítéséhez, és elrejtjük azt inaktív állapotban.
Lehet, hogy nem ismeri az ingatlant pointer-események, de lehetővé teszi annak szabályozását, hogy az elemek hogyan reagáljanak az egérkattintásra. Az értéket az osztály értékére állítjuk be modalDialog, mivel a hivatkozás nem reagál az egérkattintásra, ha az álosztály aktív ": Cél".
Most hozzáadjuk a pszeudo osztályt : célés stílusok a modális ablakhoz.
ModalDialog: cél (megjelenítés: blokk; mutató-események: automatikus;). ModalDialog> div (szélesség: 400 képpont; pozíció: relatív; margó: 10% automatikus; kitöltés: 5px 20px 13px 20px; szegélysugár: 10px; háttér: # fff; háttér: -moz-linear-gradient (#fff, # 999); háttér: -webkit-linear-gradient (#fff, # 999); háttér: -o-linear-gradient (#fff, # 999); )
Pszeudo osztály cél megváltoztatja az elem megjelenítési módját, így a hivatkozásra kattintva megjelenik a modálunk. Az ingatlan értékét is változtatjuk pointer-események.
Meghatározzuk a modális szélességét és az oldalon elfoglalt pozíciót. Határozzon meg egy színátmenetet a háttérhez és a lekerekített sarkokhoz is.
Csukd be az ablakot
Most végre kell hajtanunk az ablak bezárásának funkcióját. Kialakítjuk a gomb megjelenését:
Bezárás (háttér: # 606061; szín: #FFFFFF; vonalmagasság: 25 képpont; pozíció: abszolút; jobb: -12 képpont; szövegigazítás: középre; felül: -10 képpont; szélesség: 24 képpont; szövegdekoráció: nincs; font- súly: vastag 3px # 000; box-shadow: 1px 1px 3px # 000;) .bezárás: lebeg (háttér: # 00d9ff;)
A gombunknál beállítjuk a háttér és a szöveg pozícióját. Ezután pozícionáljuk a gombot, a keret kerekítési tulajdonságával kerekítjük, és finom árnyékot képezünk. Ha az egérmutatót a gomb fölé viszi, megváltoztatjuk a háttér színét.
Gyakran előfordul, hogy a webhelyeken modálokat találhat, és mindegyiket különböző célokra használják. Valóban, ez egy nagyon hatékony eszköz, amely lehetővé teszi a webhely felületének interaktívabbá és felhasználóbarátabbá tételét. Például a modális ablakok különféle űrlapokhoz használhatók, mint például engedélyezési űrlap, visszajelzési űrlap, termék megrendelése, és soha nem lehet tudni.
Ebben a bejegyzésben egy példát nézünk meg arra, hogyan készítsünk egyszerű modális ablakot jQuery használatávalés CSS. Ennek a példának az a sajátossága, hogy itt nincs szükség rá, magát a jQuery könyvtárat kivéve.
Helyezze el a modális kódot az oldalon:
Amint a jelölésből látható, maga a modális ablak blokkja egy div id = attribútummal modális_forma amely id = span elemet tartalmaz modal_close... Ez az elem a modális ablak bezárására szolgáló gombként fog szolgálni, emellett a blokk alatt van egy div id = attribútummal átfedés, amely egyúttal a háttér sötétítésére is szolgál. A modális ablak hivatkozással megnyílik az osztállyal modális.
CSS modális ablakhoz
#modal_form (szélesség: 300 képpont; magasság: 300 képpont; szegélysugár: 5 képpont; szegély: 3px # 000 tömör; háttér: #fff; pozíció: rögzített; felső: 45%; bal: 50%; margó felső: -150 képpont; margó balra: -150px; kijelző: nincs; átlátszatlanság: 0; z-index: 5; kitöltés: 20px 10px;) #modal_form #modal_close (szélesség: 21px; magasság: 21px; pozíció: abszolút; felül: 10px; jobb: 10 képpont; kurzor: mutató; kijelző: blokk;) #overlay (z-index: 3; pozíció: rögzített; háttérszín: # 000; átlátszatlanság: 0,8; -moz-opacitás: 0,8; szűrő: alfa (átlátszatlanság = 80) ; szélesség: 100%; magasság: 100%; felül: 0; balra: 0; kurzor: mutató; kijelző: nincs;)
Mert modális_forma beállítottunk egy rögzített szélességet és magasságot, majd a pozíciót a képernyő közepére helyeztük. Modális alátéthez ( átfedés) a méretet a képernyő szélességéhez állítjuk, átlátszósággal töltjük ki, és alapértelmezés szerint el is rejtjük. Egy különleges pillanat vele z-index, a modálisnak kell lennie a legnagyobbnak az oldal összes eleme közül, a borítón pedig a modális kivételével.
Most a legalapvetőbb, ez a javascript kód. A modális ablakhoz két fő esemény kerül felhasználásra, ez a megnyitása - egy elemre kattintva az osztállyal modális, esetünkben ez egy hivatkozás, a modális ablak bezárása pedig egy kattintás a borítón ( átfedés), vagy kattintson a bezárás gombra, esetünkben egy span elemről van szó id =-vel modal_close.
$ (dokumentum) .ready (function () ($ (. modal"). click (function (event) (event.preventDefault ();); $ ("# overlay"). fadeIn (400, // animáció a borító megjelenítésével) function () (// majd a mod. ablak megjelenítése $ ("# modal_form") .css ("display", "block") .animate ((átlátszatlanság: 1, felül: "50%"), 200);) ); )); // bezárja a modális ablakot $ ("# modal_close, #overlay"). kattints a (függvény () ($ ("# modal_form") .animate ((átlátszatlanság: 0, felül: "45%") , 200, // az átlátszóság függvényének csökkentése () (// animáció után $ (this) .css ("display", "none"); // ablak elrejtése $ ("# overlay"). fadeOut (400); / / elrejteni a tálcát) ))))))
Az animációval megváltoztatjuk a függőleges helyzetet tetejére, valamint az átláthatóság átlátszatlanság, és ezzel érdekes hatást érünk el. Hasonló hatást alkalmaznak az ablak kinyitásakor és zárásakor is. A különbség az, hogy megváltozik a blokkok tulajdonságainak alkalmazási sorrendje, ezáltal láthatóvá válik az ablak nyitása és zárása.