Modalitatea ferestrelor este ușoară
În timpul muncii mele, am lucrat cu douăsprezece plug-in-uri pentru a crea ferestre modale, aproape toate fiind construite pe baza jQuery. Dar, mai recent, mi-am dat seama că astfel de ferestre creează, deseori, mai ușor. Să facem asta în stilul Angular.
cerinţe
Aș dori să creez ferestre utilizând următorul cod HTML:
Și aveți următorul set de funcții:
- Deschideți și închideți fereastra cu variabila $ scope, setând-o la true sau false (variabila din exemplu este modalShown)
- Specificați dimensiunea ferestrei în pixeli sau procente
- Atenție la restul ecranului
- Închideți clicând pe X în colțul ferestrei sau în afara ferestrei
Codul Codului
Directiva în sine este destul de simplă, cu o funcție în mai multe linii în parametrul de legătură. Parametrul "show: '=' 'într-un domeniu separat creează un pachet dublu între variabila specificată în atributul show și variabila show în domeniul de aplicare. Setarea acestui parametru la false și true deschide sau închide fereastra. De asemenea, când deschidem, verificăm parametrii de înălțime și lățime și, dacă sunt specificați, se stabilesc valorile cerute. În cele din urmă, metoda hideModal () stabilește pur și simplu valoarea variabilei show la false.
Nu voi intra profund în CSS. Voi spune doar un singur lucru: va funcționa numai în browserele moderne. Dacă intenționați să utilizați aceste stiluri în browserele de mai jos IE9, va trebui să schimbați modul în care este centrată fereastra.
Deschiderea și închiderea ferestrei
În cele din urmă, pentru a completa exemplul, trebuie să adăugăm foarte puțin cod la pagina HTML și la controler.