Moderna webbdesigntekniker har gjort det möjligt för utvecklare att snabbt genomföra animationer som stöds av de flesta webbläsare. Jag tror att varningsmeddelanden är mycket vanliga, eftersom de vanliga JavaScript-varningsrutorna brukar vara ganska påträngande och dåligt utformade. Detta leder utvecklare ner en väg för att ta reda på vilka lösningar som skulle fungera bättre för ett mer användarvänligt gränssnitt.
För denna handledning vill jag förklara hur vi kan sammanfoga CSS3-anmälningsrutor som visas längst upp på sidokroppen. Användare kan sedan klicka på anmälningarna för att få dem att blekna och så småningom ta bort dem från DOM. Som en rolig tilläggsfunktion har jag också inkluderat knappar där du kan klicka för att lägga till en ny varningsruta i början av sidan. Kolla in min provdemo för att få en bättre bild av vad vi ska göra.
Live Demo - Hämta källkod
Bygga sidan
För att komma igång måste vi göra två filer med namnet? Index.html? och? style.css ?. Jag kommer att inkludera en hänvisning till det senaste jQuery-biblioteket som värd Googles kod-CDN. HTML är ganska enkelt eftersom vi bara behöver skapa lite dummy text i en varningsruta. Och alla JavaScript har lagts till längst ner på sidan för att spara på HTTP-förfrågningar.
Detta är min rubrikkod för inställning av externa dokument och HTML5-doktypen. Inte särskilt förvirrad eftersom vi bara bygger en provdemo. För anmälningsfönstren har jag upprättat två olika stilar - framgång och fel. Det finns andra design stilar som varningar och informationslådor, men jag skapade inte alternativa stilar eftersom jag ville fokusera mer på effekterna.