webudviklere ønsker at tilføje et unikt touch til brugergrænsefladen af deres hjemmeside kan ansætte en Javascript -baserede programmeringssprog kaldet jQuery . Modal vinduer kan være en god måde at vise små bidder af information til brugerne interagerer med din hjemmeside eller web-applikation . Du kan også bruge modale vinduer til at vise fejl, og bede brugeren om at indtaste i yderligere oplysninger. At få modal vinduet for at vise er et spørgsmål om at bruge den korrekte kode og konfigurere det korrekt at arbejde sammen med resten af din hjemmeside. Instruktioner
1
Åbn HTML på din webside ved hjælp af en webside kodning program eller en klartekst redigering program som Microsoft Notesblok eller Mac OS X TextEdit .
2
Tilføj modal vindue til din hjemmeside ved hjælp af følgende kode : Hej
modal Window
< /center> < a class = ' activate_modal ' name = ' first_window ' href = ' #' > Første modal vinduet.
Dette er den første modal vinduet
Konfigurer HTML-tags i eksemplet ovenfor til at passe til dine behov ved at justere placering og div ids .
< br >
3
Åbn CSS-fil , der dikterer den stil af din webside i samme program, så du kan tilføje den modale vindue CSS stilarter, som er væsentlige for at gøre det solid grå , baggrund: # 246.493 , farve : sort ;}
4
Tilføj jQuery show_modal kode, der i sidste ende er ansvarlig for at kalde vinduet og gør det muligt at vise på dit websted HTML-dokument : Hej
funktion show_modal ( modal_id ) { $ ( '# maske " ) css ( {' display ':' block ' , opacitet : 0} ) . $ ( ' # maske" ) fadeTo ( 500,0.8 ) $. ( '# ' + modal_id ) fadeIn ( 500) . }
5
Gem den modificerede HTML og CSS filer til dit websted og derefter overføre dem til din produktion webserver miljø for at gemme ændringerne , og start visning af modal vinduet.
