A legkülönbözőbb célokra szolgáló felugró ablakok számos felhasználási lehetőséget kínálnak a webépítésben. Használhatók különféle menük létrehozására, reklámszövegek és grafikák elhelyezésére, bonyolult űrlapok kitöltésekor eszköztippekre, és kényelmes maguk az űrlapok elhelyezése olyan ablakokban, amelyek nem foglalnak helyet az oldalon. Cikkünkben leírást talál arról, hogyan készíthet ilyen ablakot.
Szükséges
HTML alapismeretek
Utasítás
1. lépés
popup, html, rejtett réteg
2. lépés
A web számos oldalán láthatja, hogy különféle JavaScript keretrendszerek (jQuery, MooTools, Prototype stb.) Díszes könyvtárai használják felugró ablakok létrehozására az oldalakon. Valójában azonban ezekre a problémákra nincs szükség. A Hypertext Markup Language (HTML) és a Cascading Style Sheets (CSS) által elérhető eszközök elegendőek az előugró ablakok létrehozásához. Az így létrehozott ablakok függetlenül attól működnek, hogy a JavaScript engedélyezve van-e a látogató böngészőjében.
Az előugró ablakot létrehozó összes kód két sorra helyezhető. Az első sor létrehoz egy linket, amelyre kattintva megjelenik a felugró ablak:
Kattints ide!
Itt a linkcímke onmouseover attribútuma állítja be az alapértelmezett egérkurzort a linkekhez. Az onclick attribútum megadja, hogy a hivatkozásra kattintva a rejtett PopUp blokknak láthatónak kell lennie.
A második sor valójában a felugró ablak. Réteg a PopUp azonosítóval és az ablak méretével, a stílus attribútumában megadott szöveg színével és méretével, háttérrel és szegéllyel:
Ez a felugró ablak szövege
Alapértelmezés szerint nem látható - ezt a kijelzőválasztó jelzi, amelynek értéke a rétegstílus leírásában nincs.
Valójában csak erre van szükség egy előugró ablak létrehozásához - helyezze ezt a két sort a címkék és az oldal közé, és készen áll a használatra.
3. lépés
A címke előtti felugró ablak bezárásához hozzá kell adnia egy linket, amely ellentétes műveletet hajt végre - elrejti a látható réteget a PopUp azonosítóval:
Bezárás
4. lépés
És ha azt szeretné, hogy az ablak ne kattintással, hanem az egér kurzorának lebegtetésével jelenjen meg, akkor a linkkel ellátott első sort így kell módosítani:
vigye ide az egeret!
5. lépés
Most már ismeri az előugró ablak kódjának elvét és felépítését, és megjelenésének és tartalmának kialakítása teljes mértékben az Ön céljaitól és fantáziájától függ.
