Létrehozása egyszerű irányelvnek a párbeszédablakban
A modális ablakok csak
Munkája során, dolgoztam több tucat plug-inek létrehozására modális ablakok, szinte minden ami épültek alapján jQuery. Az utóbbi időben azonban rájöttem, hogy ilyen ablakok létrehozását, gyakran egyszerűbb. Csináljuk stílusban szögletes.
követelmények
Szeretnék létrehozni egy ablak a következő HTML kódot:
És, hogy a következő funkciókat:
- Nyitott és zárja be az ablakot a $ körét változó beállításával, hogy igaz vagy hamis (a változó a példában - modalShown)
- Adja meg az ablak méretét pixelben vagy százalékban
- Dimming a többi képernyő
- Bezár kattintva az X a sarokban a doboz vagy a dobozon kívül
kód irányelv
Maga az irányelv meglehetősen egyszerű, a funkciója a néhány sort a paraméter link. Paraméter „show:»=«” egy külön területen a láthatóság létrehoz egy kettős kötés között változó meghatározott attribútum mutat változó és show körét. Ezen opció hamis és igaz nyitja vagy zárja be az ablakot. Szintén a megnyitó ellenőrizzük a magasság és a szélesség beállításokat, és ha kapnak, akkor tegye meg a kívánt értékeket. Végül, az eljárás hideModal () egyszerűen beállítja az értékét mutatják, hogy hamis.
Nem fogom alaposan ásni CSS. Csak azt tudom mondani, egy dolog - csak akkor működik a modern böngészőkben. Ha azt tervezi, hogy használja ezeket a stílusokat a böngészők alábbi IE9, akkor meg kell változtatni a központosító ablakot.
Ablak nyitás és zárás
És végül, hogy töltse ki a példát, mi kell hozzá egy kicsit a kódot egy HTML oldal, és egy vezérlőt.