A modális ablak css, hogyan lehet egy modális ablak
Hi all, azt fogja mondani egy nagyon kényelmes dolog, amely az úgynevezett modális ablak, megbeszéljük, hogyan lehet egy modális ablak. Sokan nem értik, hogy mi ez, megpróbálom megmagyarázni egyszerű nyelven az Ön számára, más szóval - ez egy pop-up ablak, amikor megnyomja a gombot, vagy szöveget.
Egy másik példa, ahol szintén egy dobozba, a banner kódját és a reklám is. A partnerprogram oldalon.
Tekintsük a modális ablak a css, hogy ne megkocsikáztat fogjuk használni a stílus, mely alapvetően előírja stílusok fájlt, és a kódot ablakunk, nézd meg a részleteket, hogy mit és hogyan.
A modális ablak css, hogyan lehet egy modális ablak
Az első dolog, amire szükségünk van egy stílusa, másolja be a kódot teljesen stílusok alatti, és illessze be a fő stíluslap, azaz style.css
Reserve, akkor játszani körül stílusok, és nem valami szép, a változás háttér, a határ másik csinálni, és így tovább. Ugrás az oldalra, ahol szeretné, hogy ez a pop-up ablakot, és illessze be az alábbi kódot:
Most megnyugszik egy kicsit, akkor meg kell változtatni. Amennyiben tönkölybúza „Button”, ahol lehet beszúrni egy képet a thai szöveg, amit akarsz, hogy van, amikor rákattint megnyílik egy ablak. Amennyiben írva: „Itt van a tartalmát az ablak” beszúrni valami, amit szeretne látni a pop-up ablak, hogy alapvetően minden.
Üdvözlettel Eugene Smetskoy
Szia Eugene! Példa kedvelt az egyszerűség és a minőség. De van egy kérdés. Azon az oldalon, van néhány kép a későbbi növekedés a modális ablakot. Lásd egy kis kép (amit meg kell nyomni) közelében helyezkednek el: a href = „#ModalOpen” title = „” rel = „nofollow”> kép egy kis 1 A nagy kép, hogy meg kell jelennie a modell ablak van elhelyezve a blokkban: a href = "# Bezárás" title = "Close" rel = "nofollow"> X több kép 1 Ez a rész jól működik! Nagy kép 1 (a továbbiakban: BI №1) jelenik meg a modális doboz tökéletes! De minden későbbi képek az oldalon, ha rákattintunk, kijelzőt modális ablak ismét BI №1, ahelyett, hogy a fenti BI leképezések №2, №3 BI, stb „Kis képek” jelennek meg, ha szükséges - minden más. Kérdés, hogy akkor Eugene, hogy ez hogyan kell rögzíteni valamit, talán észre valahol, és hibáznak. Általában vajon lehetséges-e, hogy ezt például oldalon 10-20 képek, amelyek megjelennek a modális ablakot a példa? Én is nagyon hálás a választ!
Az én esetemben, mindegyik kép egy összeállítási rajz a terméket. Ezek a termékek az oldalon lesz a 30. Értettem, meg kell adnia minden ablak az azonosítóját, azaz ha: a href = "# ModalOpen", majd: div id = "ModalOpen" Továbbá, ha: a href = "# ModalOpen1", majd: div id = "ModalOpen1", stb Kiderült, csak a bomba!
Tehát cool: smile:
Van néhány kép - tettem őket gombokat. Ha rákattint a képre, meg kell nyílnia moduláris dobozt a megfelelő információkat (saját információkat az egyes gombot). Hogyan jutok különböző információkat minden ablak kinyílt? Eddig a különböző képeket a ablak ugyanazt a szöveget.