ugrás a tartalomhoz

HTML - áttetsző háttér aktív box

Navee · 2011. Júl. 20. (Sze), 22.15
Sziasztok!

Lenne egy érdekes kérdésem, kíváncsi lennék ki hogy valósítaná meg. Szeretnék ötleteket gyűjteni, hogyan induljak el.

Cél: valamilyen esemény - pl. kattintás - hatására a képernyőn képződne egy layer, ami betakarná az egész képernyőt (80-90%ig átlátszó lenne). Nem lenne kattintható semmi. Eddig még talán nem is bonyolult.
Viszont lenne egy szekció, tulajdonképpen "kivágva" ebből a layer-ből egy darabka, ahol lehetne kattintani, szöveget írni bele stb. Persze gondolni kell itt arra, hogy ha mondjuk írunk bele valamit, akkor a mérete változhat ennek a div-nek.

Találkozott már valaki ilyen cuccal? Vagy valami hasonlóval? Szívesen várok minden építő jellegű hozzászólást/ötletet/linket, vagy bármit, amivel előrébb jutok.

Előre is köszönöm mindenkinek!
‹ Lightbox plugin működési hiba A HTML alapú web problémái és megoldási javaslatok ›
 ■
1

Ez konkrétan úgy működik,

inf · 2011. Júl. 20. (Sze), 23.01
Ez konkrétan úgy működik, hogy 4 layerrel körberakod a kattintható részt.
9

Igen, köszönöm, az alapötlet

Navee · 2011. Júl. 21. (Cs), 17.26
Igen, köszönöm, az alapötlet nálam is innen indult, de nem akartam ennyire "favágó" lenni, biztos voltam benne, hogy ezt lehet okosabban is. :) Azért köszönöm a segítségedet!
2

Expose

Poetro · 2011. Júl. 20. (Sze), 23.08
jQuery Tools Expose
4

Később

pkadam · 2011. Júl. 20. (Sze), 23.33
Először tanulja meg, hogy mi hogyan működik, mi miért történik, és utána már könnyíthet magán jQuery-vel :) Sokkal jobb, ha nem csak örülünk, hogy "jé, de jó, hát ez megcsinálja", hanem tudjuk is, hogy mi van a motorháztető alatt. Legalábbis én élvezem felfedezni és megérteni a (számomra) új technikák működését.
7

Osztom a véleményedet! Én is

Navee · 2011. Júl. 21. (Cs), 17.23
Osztom a véleményedet! Én is szeretem felfedezni és megérteni mi hogy működik. Viszont amikor valami új(abb) dologgal találkozom, aminek neki lehetne menni több irányból, akkor mindig elkezdek keresgélni, ki hogy oldja meg. Nem mindig egészséges, ha a saját fejem után megyek... :) Meg ha találok egy olyat, ami hasonló az elképzeléseimhez, akkor azt úgyis darabokra szedem, értelmezem, és alakítom saját szám íze szerint. Meg mások kódjából rengeteget lehet okosodni. Én ezt a "visszafele tanulós" logikát követem, eddig még nem volt hátrányom belőle... ;)
De mivel számomra problémát jelentett, hogy a google-ben 3 szóban tudjam ezt definiálni, ezért jöttem ide. Poetro-nak hála, adott a kezembe egy komplett megoldást.
8

Köszönöm szépen, pont

Navee · 2011. Júl. 21. (Cs), 17.24
Köszönöm szépen, pont erre/ilyenre gondoltam!
10

Köszönöm szépen, pont

Navee · 2011. Júl. 21. (Cs), 17.26
Köszönöm szépen, pont erre/ilyenre gondoltam!
3

Nem nagy kaland

pkadam · 2011. Júl. 20. (Sze), 23.24
Csinálsz egy div-et (display:none, position:fixed, top:0px, left:0px), aminek a háttere a félig áttetsző png, a div pedig 100% széles és magas (és érdemes egy jó nagy z-index-et megadni még, pl. 101). Ebbe a div-be rakod a felbukkanó ablakot, középre igazítva (nyilván ez úgy a legkönnyebb, ha fix a mérete). A megjelenítést kiváltó eseménynél a fő div display:block lesz, a body pedig overflow:hidden.

"ha mondjuk írunk bele valamit, akkor a mérete változhat" - arra gondolsz, hogy kontextusfüggő a tartalma, vagy hogy a júzer ír bele, aminek hatására átméreteződne?
5

Egyszerű, a layer z-indexe

LeGaS · 2011. Júl. 21. (Cs), 00.49
Egyszerű, a layer z-indexe legyen alacsonyabb, mint a szerkesztendő div-ednek, így ki fog tűnni az áttetsző háttér mögül és szerkesztheted is, ahogy akarod.
6

Vagy ha az előző megoldások

Karvaly84 · 2011. Júl. 21. (Cs), 02.08
Vagy ha az előző megoldások nem lennének jók valamiért le ellenőrizheted a kattintás koordinátáit és annak függvényében haladsz tovább, hogy a kattintás bele esik e az engedélyezett területbe.

Belső margókkal be határolod a területet.
11

Köszönöm mindenkinek az

Navee · 2011. Júl. 21. (Cs), 18.56
Köszönöm mindenkinek az ötletelést, nálam Poetro linkje nyert: jQuery Tools Expose

A forrása ennek a megoldásnak:
jQuery Tools Expose - forrás. Lehet belőle tanulni, én is ezt teszem... :)