Le moderne tecniche di web design hanno permesso agli sviluppatori di implementare rapidamente animazioni supportate dalla maggior parte dei browser. Penso che i messaggi di avviso siano molto comuni, perché le finestre di avviso JavaScript predefinite tendono ad essere piuttosto invadenti e mal progettate. Questo porta gli sviluppatori a trovare un modo per capire quali soluzioni potrebbero funzionare meglio per un'interfaccia più user-friendly.
Per questo tutorial voglio spiegare come possiamo mettere insieme le caselle di notifica CSS3 che appaiono nella parte superiore del corpo della pagina. Gli utenti possono quindi fare clic sulle notifiche per farli svanire e infine rimuoverli dal DOM. Come una funzione aggiunta divertente, ho anche incluso pulsanti in cui è possibile fare clic per aggiungere una nuova casella di avviso nella parte superiore della pagina. Guarda la mia demo di esempio per avere un'idea migliore di ciò che faremo.
Demo dal vivo - Scarica il codice sorgente
Costruire la pagina
Per iniziare, dobbiamo creare due file denominati? Index.html? e? style.css ?. Includerò un riferimento all'ultima libreria jQuery ospitata dal codice CDN di Google. L'HTML è abbastanza semplice poiché abbiamo solo bisogno di creare un testo fittizio all'interno di una finestra di avviso. E tutto il codice JavaScript è stato aggiunto nella parte inferiore della pagina per salvare le richieste HTTP.
Questo è il mio codice di intestazione per l'impostazione dei documenti esterni e del doctype HTML5. Non molto complicato dal momento che stiamo costruendo una demo di esempio. Per la finestra di notifica ho impostato due stili diversi: successo ed errore. Esistono altri stili di progettazione come avvisi e caselle informative, tuttavia non ho creato stili alternativi perché volevo concentrarmi maggiormente sugli effetti.