Hogyan hozzunk létre egy modális ablak, web fejlesztés wordpress
Nos, ez az, amikor mi összejöttünk a könyvtár, definiáljuk az ablak maga hoz létre.
Mielőtt a záró test létrehoz egy blokkot, hogy az osztály html modalWindow:
Ebben a blokkban teszi a tartalmát a modális ablakot. De ezen az alábbiakban.
Tehát amikor létrehoztuk a blokk, rejtsük azt egy osztály modalWindow CSS display tulajdonság: nincs
Ha újra az oldalt a böngészőben, akkor a blokk lesz rejtve.
Nos, nézzük meghatározzák, milyen intézkedéseket fogjuk megjeleníteni a blokk. Általános szabály, hogy a modális ablak egy űrlapot, vagy valamilyen információ, ezért jelenik meg, hogy rákattint egy linkre vagy a gombot. Hozzunk létre a linkre, amely megmutatja kattintva a blokk.
Nos, ezen a ponton, alap HTML elemeket modális kona létre. Most, írj egy kis script, amely megjeleníti az űrlap linkre kattintva és elrejteni - kattintva a forma is.
Abban a pillanatban, a vizuális eredménye a szkript a következőképpen írható le: a linkre kattintva - vannak olyan szavak (amit jelzett a HTML blokk) „A modális ablak”, és ha rákattint a gombra ezeket a szavakat - rejtőznek. Akkor biztosan fel: „De hol van a dobozban?” ) És itt van az ablak most teszünk CSS. Nézzük díszítik modaWindow egységet azáltal, hogy a szélesség, magasság és a keret.
CSS, megkérdeztük az alábbi tételek értékének modalWindow blokk szélessége - 300 képpont. Magasság - 300 pixel és egy blokk keret - piros (HEX színkód - # FF0000) vastagsága 2 pixel. Is hozzá árnyék.
De ez nem emlékeztet egy modális ablak. Általános szabály, hogy a modális ablak jelenik meg a képernyő közepén, és lóg az egész szöveget. Ahhoz, hogy ezt elérjük, a pozíció ingatlan és használja hozzá, hogy mi formában abszolút pozicionálás (position: absolute);
Most hoztunk létre egy modális ablak, ahol felveheti, forma, a szöveg és más elemek megjelenítésére. Talán egyáltalán nem nyilvánvaló bal z-index. A lényeg az, hogy alapértelmezés, minden elem van Z-indexe 0. Maga az ingatlan felelős a helyzetben az elemek az Y-tengely, azaz, kivetését. Például egy elem zindex: 1 lesz egymásra a tetején az elem, amelynek értéke zindex: 0, így elemek a magasabb érték az elem fölé is kisebb.
Z-indexet használunk annak Svyostvo elmentov rendelkező sledushchie tulajdonság értéke összesen: relatív, abszolút, fix
Mint látható, hoztunk létre egy egyszerű modális ablak nélkül plug-inek segítségével. A hátránya ennek a módszernek csak akkor hívják, hogy szükség van ismerete HTML és CSS átlag, valamint megérteni, hogy a JS. De az előnyei sokkal: beállíthat egy modális ablak önmagában kihívás lekötni ezt az ablakot kattintva bármely elemét, hogy kötődnek a különböző osztályok (néha előfordul, hogy a plug-in használ egy osztály vagy azonosítót, amelyet már használt sablon), stb .
Nos, ebben és az összes)
A minta kód teljes:
wo ocommerce
EYSMAN.pro Honlap fejlesztés