, egy bizonyos tartalommal és egy "Bezárás" gombbal, amelyet kizárólag a css.

Ablak megnyitása 1 Ablak megnyitása 2 Videó az ablakban 3 Fotó a 4. ablakban

A fenti kódpéldában az egyértelműség kedvéért rövid magyarázatokat írtam a modális ablakok tárolóiba. Ez analógia útján marad neked div konténer felugró ablakban helyezze el bármely tartalmát, legyen az egyszerű szöveg, kép vagy videó bármely harmadik féltől származó forrásból, YouTube-ból, Vimeo-ból stb. Hivatkozások a modális ablakok hívására, szöveget készíthet, vagy csodálatos, színátmenetes gombok formájában tervezheti őket, 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á funkcionalitást. Kihagytam az oldal alapvető stílusait, hogy ne keverjük össze, és néhány szabályt megjegyzésekkel hígítottam fel az egyértelműség érdekében:

/ * Alapvető elsötétítés és modális rétegstílusok * /. Overlay (felül: 0; jobb: 0; alsó: 0; bal: 0; z-index: 1; láthatóság: rejtett; / * sötétítő háttér * / háttér-szín: rgba (0, 0, 0, 0,7); opacitás: 0; pozíció: rögzített; / * rögzített helymeghatározás * / kurzor: alapértelmezett; / * kurzor típusa * / -webkit -átmenet: opacitás .5s; -moz -átmenet: opacitás. 5s; -ms-átmenet: opacitás .5s; -o-átmenet: opacitás .5s; átmenet: opacitás .5s;). Overlay: target (láthatóság: látható; opacitás: 1;) .is-image (felül: 0; jobb: 0; alsó: 0; bal: 0; kijelző: blokk; margó: automatikus; szélesség: 100%; magasság: automatikus; / * a soros képek sarkának lekerekítése * / -webkit -border -sugar: 4px; -moz -border-sugar: 4px; -ms-border-sugár: 4px; border-sugar: 4px;) / * beágyazott m-média elemek, keretek * / embed, iframe (felül: 0; jobb: 0; alsó: 0; balra: 0; kijelző: blokk; margó: automatikus; min-szélesség: 320 képpont; maximális szélesség: 600 képpont; szélesség: 100%;). felugró h1 ( / * címsor 1 * / szín: # 008000; szöveg-igazítás: bal ; szöveg-árnyék: 0 1p x 3px rgba (0,0,0, .3); betűtípus: 24px "Trebuchet MS", Helvetica, sans-serif; betűtípus súlya: félkövér; ) .popup h2 ( / * 2. fejléc * / szín: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); font: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Formális modális ablakstílusok *** / .popup (felül: 0; jobb: 0; bal: 0; betűméret: 14 képpont; z-index: 10; kijelző: blokk; láthatóság : rejtett; margó: 0 automatikus; szélesség: 90%; min-szélesség: 320 képpont; maximális szélesség: 600 képpont; / * rögzített pozicionálás, az ablak görgetés közben stabil * / pozíció: rögzített; párnázás: 15 képpont; szegély: 1 képpont szilárd # 383838; / * lekerekített sarkok * / -webkit-border-radius: 4px; -moz-border-sugár: 4px; -ms-border-radius: 4px; border-sugár: 4px; background-color: #FFFFFF; / * külső doboz-árnyék * / -webkit-doboz-árnyék: 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áthatósága, kattintásra jelenik meg * / opacitás: 0; / * átmeneti hatás (megjelenés) * / -webkit -tranzit be: minden könnyedén .5s; -moz-átmenet: minden könnyű .5s; -ms-átmenet: minden könnyű .5s; -o-átmenet: minden könnyű .5s; átmenet: minden könnyű .5s; ) / * engedélyezze az ablak megjelenését és sötétítse a hátteret 1; / * eltávolítja az átlátszóságot * /) / * a bezárás gomb * *. Zárása (pozíció: abszolút; felül: -10 képpont; jobb: -10 képpont; párnázás: 0; szélesség: 20 képpont; magasság: 20 képpont; szegély: 2 képpont szilárd #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-sugár: 15px; background-color: 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; text-align: center; szövegdíszítés: nincs; betűtípus súlya: félkövér; vonalmagasság: 20 képpont; / * értékek beállítása és átmenet hatása a lebegésre * / -webkit -átmenet: minden könnyű .8s; -moz-átmenet: minden könnyű .8s; -ms-átmenet: minden könnyű .8s; -o-átmenet: minden könnyű .8s; átmenet: minden könnyedség .8s; ) .close: before (szín: rgba (255, 255, 255, 0.9); tartalom: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px;) .close: lebegés (háttérszín: rgba (252, 20, 0, 0,8); / * csavarja el a gombot a lebegéskor * / -webkit -transform: forgatás (360 fok); -moz -transzformáció: forgatás (360deg); - ms -transzformáció: forgatás (360 fok); -o -transzformáció: forgatás (360 fok); transzformáció: elforgatás (360 fok);) / * nem kötelező mellékletek hozzáadásakor * / .popup p, .popup div (margin -bottom: 10px;)

Amint látod Kedves barátaim, minden nagyon egyszerű, és nincs felesleges összetörés. Ha mindent helyesen tesz, egy csodálatos modális előugró ablakot kap az arzenáljába, amelyben bármilyen tartalmat elhelyezhet, legyen az szöveges tartalom, fénykép, különböző regisztrációs űrlapok és Visszacsatolás vagy bármilyen harmadik féltől származó videó. Kísérletezzen a paraméterekkel, módosítsa az ablakot, ahogy a szíve kívánja, és ha lehetséges, ossza meg megjegyzéseiben legjobb gyakorlatait, valamint a hirtelen felmerülő problémákat.

Napjainkban a különböző webhelyeken mindenféle felugró modális ablak - előugró ablak - regisztrációhoz, engedélyezéshez, információs ablakokhoz - mindenféle alak és méret vált normává. A jQuery for egyszerű és kényelmes alkotás ilyen felugró ablakok - például ugyanaz a Shadowbox.

Az ilyen előugró ablakok megjelenése, mérete és kialakítása teljesen változatos - átfedéssel, árnyékokkal, animációkkal - számtalan. Talán egyesíti őket az a tény, hogy általában az oldal közepén jelennek meg - vízszintesen és függőlegesen is. A központosítás pedig a JS segítségével történik. Nem részletezem ezeket a számításokat, csak röviden ismertetem őket:

A felugró HTML kód általában a következő szerkezetű:

- Előugró ablak tartalommal ->

És a CSS ( itt és lent szándékosan kihagyom néhány olyan tulajdonság írását, amelyek csak bizonyos böngészőkhöz és azok verzióihoz szükségesek, csak a legalapvetőbbeket hagyom meg):

Popup__ overlay (
pozíció: rögzített;
bal: 0;
felső: 0;
háttér: # 000;
opacitás: .5;
szűrő: alfa (opacitás = 50);
z-index: 999
}
.Felugrik (
pozíció: abszolút;
szélesség: 20%;
z-index: 1000;
szegély: 1 képpont szilárd #ccc;
háttér: #fff
}

A JS meghatározza a böngésző és a böngésző verzióját, és ez alapján kiszámítja a munkaterület méretét és maga az előugró ablak méretét (ha nincs megadva), majd egyszerű számításokat végez a bal felső sarka helyzetéről (css tulajdonságok balra és felül .popup). Sok beépülő modul reagál az oldal átméretezésére is, és minden alkalommal újraszámítja az egészet, hogy a felugró ablak pontosan a munkaterület közepén legyen.

Természetem szerint perfekcionista vagyok (tudom, néha rossz), és gyakran aggódom még az apró részletek miatt is, próbálok javítani és hozzáadni a lehető legnagyobb kiterjeszthetőséget ezekhez a részletekhez, és nem tudtam nem ragadni magam ezen a pillanaton mindezen bővítmények munkájában. Felmerült a gondolat, hogy a felugró ablak elhelyezésével kapcsolatos összes munka áthelyezhető a JS válláról a böngésző vállára, vagyis ez a munka elvégezhető a CSS segítségével.

Ezt fogjuk tenni.

Az alábbiakban egy példát adok egy előugró ablakra, amely a fő böngészők minden fő verziójában működik. Hogy megfelelően működjön IE -ben<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Tehát van egy oldalunk egy gombbal, amelyre kattintva fel kell bukkannia modális ablak némi információval, és minden más tartalmat fedővel kell árnyékolni.

Kezdjük a HTML kóddal. Szerkezete kissé eltér a fent jelzett kódtól, miért - erről bővebben alább a cikkben; az elemosztályok változatlanok maradnak:

< div class ="popup__overlay">
< div class ="popup">

És néhány CSS:

Popup__ overlay (
pozíció: rögzített;
bal: 0;
felső: 0;
szélesség: 100%;
magasság: 100%;
z-index: 999
}
.Felugrik (
}

Fix méretek

A legegyszerűbb lehetőség. Nem kell semmi újat kitalálnia:

Felugrik (
bal: 50%;
felső: 50%;
szélesség: 400 képpont;
magasság: 200 képpont;
margin -left: -200px;
margin -top: -100 képpont
}

A szélesség és a magasság fele negatív margója triviális és unalmas, ebben nincs semmi eredeti.

Az előugró ablakok mérete a tartalomtól függ

Először is, a vízszintes igazítás egyszerűbbnek tűnik. Ha a felugró ablak rögzített szélességű, akkor elegendő a következő:

Felugrik (
margó: automatikus
}

Ez semmilyen módon nem befolyásolja a függőleges igazítást, és mellesleg, ha csak vízszintes igazításra van szüksége, akkor ott megállhat a felugró ablak más felső margójának megadásával. De ez nekünk nem elég! Lépj tovább.

Függőleges igazítás. Itt válik érdekessé. Természetesen egy tábla vagy egy tábla emulációja a display: table & display: table-cell segítségével minden probléma nélkül megbirkózna egy ilyen feladattal, de a munka a régi IE-ben drágább. Az asztal is eltűnik - nyilvánvaló okokból.

Tehát a margó már hiányzik - a méreteket nem ismerjük. Emlékezzünk, milyen tulajdonságok vannak hasonló hatásokkal. Igen, igazítsa a szöveget. De csak inline elemekre. RENDBEN. Úgy tűnik, hogy maga Isten rendelte el a display: inline -block használatát - egy blokk elemet, amelyre tulajdonságokat lehet alkalmazni az inline elemekre. Ennek a tulajdonságnak a támogatásával minden böngészőben is minden rendben van, mondhatni. A kód így alakul:

Popup__ overlay (
pozíció: rögzített;
bal: 0;
felső: 0;
szélesség: 100%;
magasság: 100%;
z-index: 999;
text-align: center
}
.Felugrik (
kijelző: inline -blokk;
függőleges-igazítás: középen
}

Marad a függőleges igazítás - a függőleges igazítás megfelelő számunkra. Bármely más helyzetben is megfelelő lenne a sormagasság használata, de mivel nincs rögzített oldalmagasságunk (ebben az összefüggésben a sormagasság), ezért itt nem használható. Egy trükk a segítségre kerül az ismeretlen méretű elemek függőleges igazításával. Pontosan emlékszem, hogy Habré -n találtam ezt a módszert, de sajnos nem találtam linket a témához. Ez a módszer a következőkből áll: nulla szélességű és 100% -os szülőmagasságú inline blokk elem kerül hozzáadásra, amely a vonal magasságát a szülő magasságának 100% -ára, azaz a munkaterület magasságára "bővíti" az oldalról. Tegyük elegánsabbá - a felesleges jelölések helyett pszeudoelemeket használunk:

Popup__ overlay: után (
kijelző: inline -blokk;
szélesség: 0;
magasság: 100%;
vertical-align: középen;
tartalom: ""
}

Marad a félig átlátszó fedőréteg sötétítése - ezt az rgba fogja kezelni. Minden! Most a felugró ablak helyzetét csak a böngésző szabályozza CSS szinten.

Ebben a leckében nem árulok el titkot a tapasztalt elrendezési tervezők és css guruk számára, de ez a cikk hasznos lesz a kezdők számára. itt tanulhatja meg, hogyan hozhat létre előugró ablakokat az egész webhely tetején.

Leggyakrabban az ilyen ablakok bizonyos műveletek elvégzése után jelennek meg a webhelyen, például a felhasználó rákattint a "Visszahívás kérése" linkre, és egy megrendelőlap jelenik meg előtte.

Nagyon kényelmes a PopUp ablakok használata ajax -szal együtt, de ez egy másik lecke témája.

Egyre több olyan webes erőforrás jelenik meg a weben, amelyek PopUp előugró ablakokat használnak. Mindenki példaként tudja. közösségi hálózatok... A képernyőképekről minden felesleges adat eltávolításra került.

Kapcsolatban áll

Facebook

Twitter

Azt hiszem, elegendő oka van a kérdés tanulmányozásának megkezdésére: hogyan készítsünk előugró ablakot a webhelyén.

Problémajelentés (TOR)

Létre kell hozni egy felugró ablakot, amely tompító képernyővel rendelkezik az egész webhely tetején.

Megoldás

1. módszer

html

css

* (font-family: Areal;) .b-container (szélesség: 200 képpont; magasság: 150 képpont; háttér-szín: #ccc; margó: 0 képpont automatikus; párnázás: 10 képpont; betűméret: 30 képpont; 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ő: 0 képpont;) .b-felugró .b-előugró ablak -tartalom (margó: 40 képpont automatikus 0 képpontos automatikus; szélesség: 100 képpont; magasság: 40 képpont; párnázás: 10 képpont; háttér-szín: # c5c5c5; szegélysugár: 5 képpont; doboz-árnyék: 0 képpontos 0 képpont 10 képpont # 000;)

Eredmény:

Nagyon gyakran javasolt használni:

Pozíció: abszolút;
Igen, az eredmény ugyanaz, de mivel beállítottuk az "árnyékoló" blokk magasságát, 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

* (font-family: Areal;) .b-container (szélesség: 200 képpont; magasság: 150 képpont; háttér-szín: #ccc; margó: 0 képpont automatikus; párnázás: 10 képpont; betűméret: 30 képpont; szín: #fff;) .b-felugró ablak (szélesség: 100%; min-magasság: 100%; háttér-szín: rgba (0,0,0,0,5); túlcsordulás: rejtett; pozíció: rögzített; felső: 0 képpont;) .b-előugró ablak. b-felugró tartalom (margó: 40 képpont automatikus 0 képpontos automatikus; szélesség: 100 képpont; magasság: 40 képpont; párnázás: 10 képpont; háttér-szín: # c5c5c5; szegélysugár: 5 képpont; doboz-árnyék: 0 képpont 0 képpont 10 képpont # 000;)

Az eredmény hasonló

Az ingatlannak köszönhetően: min-magasság: 100%; blokk "sötétedésünk" 100% -os szélességet szerzett és minimális magasság a képernyő 100% -ában.

Az egyetlen hátrány ez a módszer az, hogy a internet böngésző ezt a tulajdonságot csak a 8.0 verzió óta támogatja.

Varázslat hozzáadása a Jquery -hez

Most adjunk hozzá linkeket a felugró ablak elrejtéséhez / megjelenítéséhez.

Ehhez össze kell kapcsolnia 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 felugró ablak eltűnik.

Az eredményt itt láthatja.

Ebben a leckében nem árulok el titkot a tapasztalt elrendezési tervezők és css guruk számára, de ez a cikk hasznos lesz a kezdők számára. itt tanulhatja meg, hogyan hozhat létre előugró ablakokat az egész webhely tetején.

Leggyakrabban az ilyen ablakok bizonyos műveletek elvégzése után jelennek meg a webhelyen, például a felhasználó rákattint a "Visszahívás kérése" linkre, és egy megrendelőlap jelenik meg előtte.

Nagyon kényelmes a PopUp ablakok használata ajax -szal együtt, de ez egy másik lecke témája.

Egyre több olyan webes erőforrás jelenik meg a weben, amelyek PopUp előugró ablakokat használnak. Példa erre az ismerős közösségi hálózatok. A képernyőképekről minden felesleges adat eltávolításra került.

Kapcsolatban áll

Facebook

Twitter

Azt hiszem, elegendő oka van a kérdés tanulmányozásának megkezdésére: hogyan készítsünk előugró ablakot a webhelyén.

Problémajelentés (TOR)

Létre kell hozni egy felugró ablakot, amely tompító képernyővel rendelkezik az egész webhely tetején.

Megoldás

1. módszer

html

css

* (font-family: Areal;) .b-container (szélesség: 200 képpont; magasság: 150 képpont; háttér-szín: #ccc; margó: 0 képpont automatikus; párnázás: 10 képpont; betűméret: 30 képpont; 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ő: 0 képpont;) .b-felugró .b-előugró ablak -tartalom (margó: 40 képpont automatikus 0 képpontos automatikus; szélesség: 100 képpont; magasság: 40 képpont; párnázás: 10 képpont; háttér-szín: # c5c5c5; szegélysugár: 5 képpont; doboz-árnyék: 0 képpontos 0 képpont 10 képpont # 000;)

Eredmény:

Nagyon gyakran javasolt használni:

Pozíció: abszolút;
Igen, az eredmény ugyanaz, de mivel beállítottuk az "árnyékoló" blokk magasságát, 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

* (font-family: Areal;) .b-container (szélesség: 200 képpont; magasság: 150 képpont; háttér-szín: #ccc; margó: 0 képpont automatikus; párnázás: 10 képpont; betűméret: 30 képpont; szín: #fff;) .b-felugró ablak (szélesség: 100%; min-magasság: 100%; háttér-szín: rgba (0,0,0,0,5); túlcsordulás: rejtett; pozíció: rögzített; felső: 0 képpont;) .b-előugró ablak. b-felugró tartalom (margó: 40 képpont automatikus 0 képpontos automatikus; szélesség: 100 képpont; magasság: 40 képpont; párnázás: 10 képpont; háttér-szín: # c5c5c5; szegélysugár: 5 képpont; doboz-árnyék: 0 képpont 0 képpont 10 képpont # 000;)

Az eredmény hasonló

Az ingatlannak köszönhetően: min-magasság: 100%; blokk "sötétedésünk" 100% -os szélességet szerzett és minimális magasság a képernyő 100% -ában.

Ennek a módszernek az egyetlen hátránya, hogy az Internet Explorer csak a 8.0 verzió óta támogatja ezt a tulajdonságot.

Varázslat hozzáadása a Jquery -hez

Most adjunk hozzá linkeket a felugró ablak elrejtéséhez / megjelenítéséhez.

Ehhez össze kell kapcsolnia 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 felugró ablak eltűnik.

Az eredményt itt láthatja.

A funkciók szempontjából egyszerű, teljesen CSS -ben végrehajtott modális ablak, ahol különböző funkciókat helyezhet el, amelyeket meg kell hívni az oldalon. Valószínűleg ez az egyik a sok közül, amelyekkel a modális ablakok kiválasztásakor találkoztam, mind a prosztata beállításait, mind a telepítést illetően. De a legfontosabb a funkcionalitása, amely nem lesz rosszabb másoknál. Ezenkívül alapértelmezés szerint világos árnyékban készül, ahol a jobb oldalon felső sarok a gomb be van állítva, kereszt formájában.

Ami a letiltási funkcióhoz megy, vagy csak a keret eltűnéséhez, ahol még ezen a kis elemen is van hatás a színpaletta megváltoztatására. Most a webmester felteheti a webhelyre, és leírást vagy operátorokat helyezhet el benne, amelyek különböző kategóriákat, például statisztikákat vagy besúgókat jeleníthetnek meg.

De az a tény, hogy ha sötét stílusú az erőforrás, akkor a stílusban gyorsan megváltoztathatja a skálát, vagy inkább az eredeti kialakításhoz igazíthatja. Íme az egyik standard módszerek hogyan kell csinálni tiszta css modális ablakba, amely akkor indul el, ha a gombra kattint a link alatt egy HTML -horgony. Maga a gomb inkább a láthatóságra irányul, ahol a stílusokban egy osztály eltávolítása és a név marad, amelyet a navigációba vagy a vezérlőpultba lehet helyezni, ahol a fő funkció vagy a webhely navigációja található.

Ilyenkor ellenőrizzük, hogy minden rendben működik -e:

A telepítés megkezdése:

Ablak egy gombbal

CSS

Butksaton-satokavate (
kijelző: inline-block;
szövegdíszítés: nincs;
margin-right: 7 képpont;
határsugár: 5 képpont;
párnázás: 7px 9px;
háttér: # 199a36;
szín: # fbf7f7! fontos;
}

Anelumen (
kijelző: flex;
pozíció: rögzített;
bal: 0;
felső: -100%;
szélesség: 100%;
magasság: 100%;
align-items: center;
igazolni-tartalom: center;
opacitás: 0;
-webkit-átmenet: felső 0s, 7s, opacitás, 7s 0s;
átmenet: felső 0s, 7s, opacitás, 7s 0s;
}

Anelumen: cél (
felső: 0;
opacitás: 1;
-webkit-átmenet: nincs;
átmenet: nincs;
}

Anelumen figura (
szélesség: 100%;
maximális szélesség: 530 képpont;
pozíció: rokon;
párnázás: 1.8em;
opacitás: 0;
háttérszín: fehér;
-webkit-átmenet: opacitás .7s;
átmenet: opacitás, 7s;
}

Anelumen.lowingnuska ábra (
háttér: # f9f5f5;
határsugár: 7 képpont;
padding-top: 8px;
szegély: 3 képpont szilárd #aaabad;
}

Anelumen.lowingnuska ábra h2 (
margin-top: 0;
párnázott-alsó: 3px;
border-bottom: 1 képpont szilárd # dcd7d7;
}

Anelumen: célszám (
opacitás: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
szövegdíszítés: nincs;
pozíció: abszolút;
jobbra: 8 képpont;
felső: 0px;
betűméret: 41 képpont;
}

Anelumen .nedismiseg (
bal: 0;
felső: 0;
szélesség: 100%;
magasság: 100%;
pozíció: rögzített;
háttérszín: rgba (10, 10, 10, 0,87);
tartalom: "";
kurzor: alapértelmezett;
láthatóság: rejtett;
-webkit-átmenet: mind .7s;
átmenet: mind .7s;
}

Anelumen: target .nedismiseg (
láthatóság: látható;
}

Tudnia kell azt is, hogy a CSS stílus és álosztály azok közé tartozik, amelyeket a CSS funkciók nem használnak ki teljesen, sok érdekes potenciális alkalmazással.

Akkor kezdődik, amikor URL oldal megegyezik az elem azonosítójával, vagy másképp is fogalmazhat, ilyenkor a felhasználó egy adott elemre ugrik az oldalon.