Ciao a tutti e… Buon 2017!!!! 😀

Dopo le feste natalizie è giunto il momento di ripartire ancora più energici!!

Let’s Go! 🙂

CHE COSA SONO LE MODALI?

Oggi vi spiegherò come inserire le finestre modali utilizzando Bootstrap!

Prima di tutto bisogna sapere che, le modali sono le finestre “figlie” che vengono generate da una finestra “genitore”.

Lo scopo delle modali è quello di focalizzare l’attenzione dell’utente su una porzione di informazione e di interagire con la finestra.

Un esempio di finestra modale è rappresentato anche da messaggi di allerta:

“Sei sicuro di voler continuare?”

“Sei sicuro di voler uscire?” 🙂 

LE MODALI IN BOOTSTRAP

Come esercizio ho realizzato un sito web natalizio con le foto più belle delle varie serate. Ho fatto in modo che ogni foto si aprisse tramite una modale (con tanto di titolo in alto e commento a destra!) 🙂

Per poter inserire le modali con Bootstrap ho scritto il seguente codice magico:

Attenzione: Ricordatevi di inserire jquery e bootstrap tramite il codice <script> prima della chiusura del </body>. Altrimenti le modali non funzioneranno… 😛

Ultimissimo Step e poi ci siamo !

Per far sì che la finestra modale funzioni dobbiamo scrivere due attributi nel tag <a> della nostra foto.

  1. data-toggle =“modal” 
  2. data-target =“un selettore css della modale” (ad esempio un selettore di id)

Et Voilà la finestra modale! 😀




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.