Atunci când am conectat biblioteca, să o definim și să creăm fereastra în sine.
Înainte de a închide eticheta corporală, creați un astfel de bloc html cu clasa modalWindow:
În acest bloc vom introduce conținutul ferestrei noastre modale. Dar mai mult despre asta mai târziu.
Atunci când am creat blocul, hai să îl ascundem prin adăugarea proprietății de afișare în clasa modalWindow CSS: display: none
Dacă reîncărcați pagina în browser, atunci acest bloc va fi ascuns.
Acum, să definim ce acțiune vom afișa blocul nostru. În mod tipic, fereastra modală conține fie un formular de feedback, fie un fel de informații, și prin urmare va fi afișat făcând clic pe un link sau pe un buton. Să creați link-ul nostru, care prin clic va afișa blocul nostru.
Ei bine, în acest moment, elementele HTML elementare pentru moda kona sunt create. Acum, vom scrie un mic script care va afișa formularul făcând clic pe link și ascundându-l - făcând clic pe formularul însuși.
În momentul de față, rezultatul scriptului poate fi descris astfel: faceți clic pe link - vor apărea cuvintele (pe care le-am specificat în blocul HTML) "fereastra noastră modală" și când faceți clic pe aceste cuvinte - acestea sunt ascunse. Probabil vă întrebați: "Și unde este fereastra?" ) Dar vom face acum o fereastră folosind CSS. Să decorăm modaWindow prin specificarea lățimii, înălțimii și cadrului.
Utilizând CSS, setăm următoarele valori pentru blocul modalWindow: Width - 300 px. înălțimea este de 300 de pixeli, iar blocul de bloc este roșu (codul de culoare HEX este # FF0000) cu 2 pixeli grosime. Și, de asemenea, a adăugat o umbră.
Dar acest lucru nu reamintește fereastra modală. De regulă, modal, fereastra apare în centrul ecranului și se blochează peste tot textul. Pentru a realiza acest efect, folosim proprietatea poziției și cu ajutorul acesteia adăugăm poziția noastră absolută (poziție: absolută);
Acum am creat o fereastră modală, în care puteți adăuga: formularul, textul și alte elemente de afișat. Poate că, sigur, proprietatea indexului z nu este de înțeles. Lucrul este că, în mod implicit, toate elementele au un indice z egal cu 0. Proprietatea însăși este responsabilă pentru poziția elementelor de-a lungul axei Y, adică pentru impunere. De exemplu, un element cu zindex: 1 va fi suprapus pe elementul cu o valoare a indexului z: 0, deci elementele cu cea mai mare valoare sunt deasupra elementelor cu cele mai mici.
Indicele Z este utilizat pentru elementele care au următoarele valori pentru poziția: proprietate relativă, absolută, fixă
După cum puteți vedea, am creat o fereastră modală simplă fără a utiliza plug-in-uri. Dezavantajul acestei metode poate fi apelată numai necesitatea de a avea cunoștințe de mediu HTML si CSS, precum și pentru a înțelege modul în care JS. Dar avantajele de mult mai mult: puteți crea o fereastră modal de la sine, o provocare pentru a lega această fereastră făcând clic pe orice element pentru a lega clase diferite (uneori se întâmplă ca plug-in folosește o clasă sau ID-ul, pe care le-ați folosit deja în șablon), etc. .
Ei bine, asta-i tot, asta-i tot)
Cod exemplu:
De afaceri
Dezvoltarea site-ului EYSMAN.pro
Articole similare
Trimiteți-le prietenilor: