Tájékoztató üzenetek a webhelyen a jquery és a css
Hello mindenkinek! A közelmúltban a feladat az volt, hogy dinamikusan üzenetet küldjön az eseményekhez, amelyeket a webhely látogatója okozott. Próbáljuk meg létrehozni az informatív üzeneteket a webhelyen a jQuery és a CSS használatával.
A felugró ablakok számos alkalmazást tartalmaznak - a hasznos, a fogyasztói szoftverektől a rosszindulatúakig.
Ebben a kódban, ahogy láthatja, ilyen típusú üzeneteket láthat: információs üzenetet, hibaüzenetet, figyelmeztetést és üzenetet a sikeres működésről.
Ezután írjuk le a stílusokat, nevezetesen az animált átlós üzenetcsíkok teljesítményét.
Kezdetben elrejtse az összes üzenetet rögzített pozícionálással (az abszolút érték csak IE6 esetén használható, mivel nem támogatja a pozíciót: fix).
Tehát a CSS készen áll, folytassa a jQuery-t. Először hozzon létre egy sor üzenetet, amelyet feldolgozni és nyomtatni fogunk:
Ezután fontolja meg az összes üzenetet elrejtő funkciót.
A szövegmennyiségtől függően az üzenet magassága dinamikusan módosítható, így az üzenet magasságát úgy számítják ki, hogy az üzeneteket helyesen elrejtse.
A showMessage funkciót a gomb megnyomásakor hívják meg, és felelős az üzenet animációjáért és a megállási pontért a képernyőn, mivel a felugró üzenetek a fejléc alatt jelennek meg (ez világosan látható a bemutatóban).
Az oldal betöltése után az összes üzenetet elrejtse: hideAllMessages (). Ezután, ha rákattint a megfelelő gombra, megjelenik az üzenet: