Mesaje informative pe site-ul jquery și css

Buna ziua tuturor! Recent, sarcina a fost de a scoate în mod dinamic mesaje către evenimente pe care vizitatorul site-ului le provoacă. Să încercăm să creăm mesaje informative pe site folosind jQuery și CSS.







Ferestrele pop-up au o gamă largă de aplicații - de la util pentru software-ul de consum la malware.

În acest cod, după cum puteți vedea, puteți vedea astfel de tipuri de mesaje ca: un mesaj de informare, un mesaj de eroare, un avertisment și un mesaj despre operațiunea de succes.

Apoi, să prescrieți stilurile, și anume performanța de benzi diagonale animate de mesaje.







Inițial, ascundeți toate mesajele utilizând poziționarea fixă ​​(valoarea absolută este utilizată numai pentru IE6, deoarece nu suportă poziția: fixă).

Și așa, CSS este gata, continuați cu jQuery. Mai întâi, creați o serie de mesaje pe care le vom procesa și tipări:

Apoi, ia în considerare o funcție care ascunde toate mesajele.

În funcție de cantitatea de text, înălțimea mesajului poate fi modificată dinamic, astfel încât înălțimea mesajului este calculată pentru a ascunde corect mesajele.

Funcția showMessage este apelată la apăsarea butonului și este responsabilă de animarea mesajului și a punctului de oprire pe ecran, deoarece mesajele pop-up sunt afișate sub antet (acest lucru este clar văzut în demonstrație).

După încărcarea paginii, ascundeți toate mesajele: hideAllMessages (). Apoi, când faceți clic pe butonul corespunzător, afișăm mesajul:







Articole similare

Trimiteți-le prietenilor: