az id és class:
Stretch, hogy annak teljes szélessége és magassága a dokumentum, add az átláthatóság, fix elhelyezése és nagy z-index az átfedés az összes elem az oldalon - nagyobb z-index, azonban csak a pop-up ablak:
Felhívjuk figyelmét, hogy az egyik legfontosabb jellemzőit itt a helyzet: fix. úgy, hogy a sötét háttér görgetés görgetés. Ezért ez a módszer nem fog működni az IE6 - nem támogatja ezt a funkciót, és lesz, hogy kérjen segítséget JS. De mi maradt egyedül a böngésző, nem igaz?
És egy másik kérdés - cross-browser átláthatóság további rájöttem keresztül JQ, az IE hibája fedezték egy kis rejtett megjelenítésekor a blokk.
A munka eredményeként eddig végzett nélkül script:
jQuery szkriptek
az alapvető funkciókat
Nézzük Powered by ablakunk, rájövünk felemelkedő bekövetkeztével egy esemény, például kattintva az egérrel. Szöveg hozzáadása a dokumentumhoz, ha rákattint a doboz fog megjelenni:
Kattintson ide, hogy nyisson meg egy pop-up ablakban
Kezdjük megírt pop-up ablak:
Először is, elrejteni az ablakot, és adjunk hozzá egy cross-browser átlátszó tartály a háttérben:
Persze, akkor elrejteni lényeges elemeit CSS-tulajdonságok display: none. de amikor JS ki van kapcsolva, nem tudja megnyitni az ablakot. Annak ellenére, hogy minden attól függ, a feladat.
adhatunk a kényelem a felhasználót egy üzenet, amely megjelöli azokat a fogyatékos JS, valahogy így:
A következő lépés - tarts egy kattintással eseménykezelő elemek # kattintásra nekem a show ablakok és # gmb-szoros, # hide-elrendezés. illetve, hogy elrejtse. Az általunk használt kész módszerek fadeIn / fadeOut:
Arra is szükség van, hogy lefagy rakodók a gombok, kattintva, hogy minden olyan intézkedés végrehajtása után újra elrejtse az ablak:
Mint látható, a jQuery minden csak a csúnyaság. Még a nagyi fog feldolgozni a kódot.
A speciális funkciók - központosító ablak az oldal közepére
Most minden működik, ahogy kellene, de majd valami mást, nevezetesen központtól az ablak közepén az oldalt JQ. Ismét meg tudod csinálni a szokásos CSS, de JS / jQuery segítségével mindent megtenni rugalmasabb - dinamikusan kiszámításához az ablak méretét és az elem és a helyettesítő a kívánt helyzetbe kiadásával mindez egyszerű kis funkció:
Különös figyelmet kell fordítani értékek és bal felső koordinátákat. amelyben vysschityvaem szélesség / magasság a böngésző ablakot, kivonni belőle szélesség / magasság a befogadó elem, és osszuk el a számokat két - ez lenne a központja az oldalt. Mivel a függvény paraméter hozzá #popup elem. Továbbra is, hogy módosítsa a kódot - hívja fel a függvény elején a forgatókönyvet, és akassza fel a átméretezés kezelő (átméretezés az ablak) az ablak. hogy az ablak mindig a közepén. A teljes kód:
Amint azt az olvasók számára a pop-up ablak nem vették figyelembe a dokumentum görgetés. Annak érdekében, hogy a lépés egy ablak felfelé vagy lefelé görgetve, akkor csak meg kell adni a tulajdon elem .popup helyzet: fix.
Köszönöm Andrew és a felhasználók ebragim.
cikk értékelése
Andrew, ez történhet sokkal könnyebb: a pozíció egy pop-up ablak: fix
D ilyen ablakok általában nem vesz sok információ, ezért hagyjuk azt, mint sötét aljzat mindig a középpontban. És ha azt szeretnénk, hogy megjelenjen a sok információ egyszerre - ez jobb kiadni egy külön oldalt. Vagy vissza információkat, miközben gépel, például ablak bolt pénztár: kérje a felhasználó személyes adatait, és elrejteni, nyisson meg egy másik ablak, stb ...
Köszönöm, vette alapul a forgatókönyvet. Azonban, ha a végrehajtási kiderült, hogy nem veszik figyelembe a központosító görgető funkciót. Ezért szükség volt egy kicsit változtatni a helyzetét a magassága a számítás:
top: $ (document) .scrollTop () + ($ (ablak) .height () - elem.height ()) / 2 + 'px'
Nos, ennek következtében a scrollTop számolva a hívás ideje ablakot, meg kellett, hogy elhalasztja végrehajtásának összehangolása, központosítása, ha átméretezés „# click-én” felvezető. Ugyanakkor felvezető még egy string nem görgetni, ha dolgozik #popup:
„# Btn-szoros, # hide-elrendezés” és a lemondás a felvezető:
Andrew, köszönöm kutatási és eredmények megosztása, szükség lesz, hogy kiegészítse a cikket. Voltak ötletek, hogyan hajtsák végre a rugalmasabb ablak, lesz idő - add.
Kapcsolódó cikkek