fereastră Modal pe css jquery

În acest post ne vom uita la un exemplu de cum să facă o fereastră modal simplu folosind JQuery și CSS. O caracteristică a acestui exemplu este că nu are nevoie de plugin-uri suplimentare. bine, cu excepția JQuery bibliotecă în sine.

Plasați ferestrele de cod modal pe o pagină:

După cum se poate observa din structura, unitatea a ferestrei modal este div c id atribut = modal_form. care elementul cuprinde o deschidere c id = modal_close. Acest element va servi ca un buton pentru a închide fereastra de mai jos modal bloc situat atribut bloc div id = suprapunere. care servește atât pentru a ascunde fundal. fereastra Modal va deschide legătura cu clasa de modal.

Urmat aranja aspectul corect, acest lucru stabilește stilul pentru fereastra modal.

CSS pentru o fereastră modal

Modal_form am cerut o lățime fixă ​​și înălțime, și apoi au poziția centrului ecranului centrat. Pentru a sprijini o fereastră modal (suprapunere) am stabilit dimensiunea lățimea ecranului, umple, transparență, și, de asemenea, o ascunde în mod implicit. Din moment particular cu indexul z. într-o fereastră modal, el trebuie să fie cel mai mare dintre toate elementele de pe pagină, în timp ce capacul trebuie să fie mai mare decât toate elementele, cu excepția fereastra modal.

Prin anima schimbăm poziția verticală pe partea de sus. precum și transparența opacitatea. si cu aceasta vom obține un efect interesant. Un efect similar este folosit ca deschiderea ferestrei, și când îl închideți. Diferența este că schimbarea ordinii de proprietăți de aplicare pentru blocuri, vizualizarea astfel deschiderea și închiderea ferestrei.