Forskjell mellom versjoner av «Modal window»

Fra LiavaagWiki
Hopp til navigering Hopp til søk
(Ny side: ==Modalt vindu== Modal window fungerer som et dialogboks. På norsk sier vi modalt vindu, modale vinduer i flertall (plural). Et modalt vindu er et sekundærvindu som festes til en fore...)
 
 
Linje 1: Linje 1:
 
==Modalt vindu==
 
==Modalt vindu==
  
Modal window fungerer som et dialogboks. På norsk sier vi modalt vindu, modale vinduer i flertall (plural). Et modalt vindu er et sekundærvindu som festes til en forelder. Det fungerer som et dialogvindu/dialogboks der brukeren må utføre en interaksjon før han tas tilbake til forelderapplikasjonen. Et eksempel på dette er de typiske dialogboksene «Lagre», «Åpne fil», «Lukk» osv. Modalvinduet er blant de mest vanlige dialogboksene i operativsystemer og programmer, men de kan også innenfor webdesign brukes til å utheve informasjon og bilder. Mange fotoalbumer bruker JavaScript, jQuery o.l. til å vise bilder. Et eksempel på dette er Lightbox-bibliotekene.
+
''Modal window'' er engelsk for modalt vindu, eller modale vinduer i flertall (plural), og fungerer som en dialogboks. Et modalt vindu er et sekundærvindu som festes til en forelder. Det fungerer som et dialogvindu/dialogboks der brukeren må utføre en interaksjon før han tas tilbake til forelderapplikasjonen. Eksempler på dette er de typiske dialogboksene «Lagre», «Åpne fil», «Lukk» osv. Modalvinduet er blant de mest vanlige dialogboksene i operativsystemer og programvare, men de kan også brukes til å utheve informasjon og bilder på nettsider. For eksempel bruker mange online fotoalbumer JavaScript, jQuery o.l. til å vise bilder ved å dempe forelderapplikasjonen i bakgrunnen. Lightbox-bibliotekene er mye anvendt for å gjøre dette.
  
  
 
==Bruk av modale vinduer==
 
==Bruk av modale vinduer==
  
Praktisk bruk av modale vinduer kjenner vi fra OS-miljøene fra både Windows og Apple. Den nødvendige interaksjonen for å stenge av dialogvinduet er anvendbart på innlogging, lukke et program, lagre osv. Men bruk av modale vinduer til viktig informasjon på nettsider har blitt kritisert som ineffektivt, fordi brukerne blir bombardert med for mange dialogbokser (Wikipedia, 2016). Da et modalt vindu må lukkes for å komme videre, fokuserer brukeren oftest på den videre interaksjonen, nettopp som å klikke «Avbryt», «Lukk» eller «OK», istedenfor å lese eller forstå budskapet i modalvinduet.
+
Praktisk bruk av modale vinduer kjenner vi fra OS-miljøene fra både Windows og Apple, samt etterhvert også fra Linux med flere. Den nødvendige interaksjonen for å stenge av dialogvinduet er anvendbart på innlogging, lukke et program, lagre osv. Men bruk av modale vinduer til viktig informasjon på nettsider har blitt kritisert som ineffektivt, fordi brukerne blir bombardert med for mange dialogbokser (Wikipedia, 2016). Da et modalt vindu må lukkes for å komme videre, fokuserer brukeren oftest på den videre interaksjonen, nettopp som å klikke «Avbryt», «Lukk» eller «OK», istedenfor å lese eller forstå budskapet i modalvinduet.
  
Modale vinduer er ment å ta brukerens fulle oppmerksomhet. De blokkerer all interaksjon og arbeidsflyt inntil modalvinduet blir lukket av brukeren. Dessuten kan det bli komplikasjoner hvis vinduet ikke vises riktig i nettleseren. Det er derfor vanlig å la viktig informasjon bli i hovedvinduet, mens modalvinduene brukes som alternativ til den veletablerte Lightbox-teknikken, som nå er et felles verktøy i webdesign.
+
Modale vinduer er ment å ta brukerens fulle oppmerksomhet. De blokkerer all interaksjon og arbeidsflyt inntil modalvinduet blir lukket av brukeren. Dessuten kan det bli komplikasjoner hvis vinduet ikke vises riktig i nettleseren. Det er derfor vanlig å la viktig informasjon bli i hovedvinduet og forelderapplikasjonen, mens modalvinduene brukes som alternativ til den veletablerte Lightbox-teknikken, som nå er et felles verktøy i webdesign.
  
  
 
==Litt mer om modale vinduer==
 
==Litt mer om modale vinduer==
  
Modale vinduer blir ofte opprettet med JavaScript. Dette er ikke er den beste praksisen innenfor RWD-nettsider. Derfor har nå «lightboxes» blitt mulig å programmere i full RWD. HTML5 og CSS3 tillater oss nå å lage modale vinduer med letthet. Eksempelet under bruker kun HTML5:
+
Modale vinduer blir ofte opprettet med JavaScript. Hver en front-end programmerer og webdesigner kan etterhvert stadfeste at dette ikke er den beste praksisen innenfor RWD-nettsider. Derfor har nå ''Lightboxes'' blitt mulig å programmere i full RWD. HTML5 og CSS3 tillater oss nå å lage modale vinduer med letthet. Eksempelet under bruker kun HTML5:
  
 
<pre>
 
<pre>
Linje 24: Linje 24:
 
</pre>
 
</pre>
  
Dessverre er det ikke alle nettleserne som støtter «dialog» funksjonen. Chrome trenger faktisk ikke CSS3 til å skjule informasjonen i dialog-elementet. Det er derfor vanlig å kombinere HTML5 og CSS3 sammen med JavaScript.
+
Nettleseren Chrome trenger faktisk ikke CSS3 til å skjule informasjonen i dialog-elementet. Men dessverre er det ikke alle nettleserne som støtter «dialog» funksjonen over, selv ikke med CSS. Foreløpig er det derfor vanlig å kombinere HTML5 og CSS3 sammen med JavaScript.
  
  

Nåværende revisjon fra 10. jan. 2017 kl. 02:44

Modalt vindu

Modal window er engelsk for modalt vindu, eller modale vinduer i flertall (plural), og fungerer som en dialogboks. Et modalt vindu er et sekundærvindu som festes til en forelder. Det fungerer som et dialogvindu/dialogboks der brukeren må utføre en interaksjon før han tas tilbake til forelderapplikasjonen. Eksempler på dette er de typiske dialogboksene «Lagre», «Åpne fil», «Lukk» osv. Modalvinduet er blant de mest vanlige dialogboksene i operativsystemer og programvare, men de kan også brukes til å utheve informasjon og bilder på nettsider. For eksempel bruker mange online fotoalbumer JavaScript, jQuery o.l. til å vise bilder ved å dempe forelderapplikasjonen i bakgrunnen. Lightbox-bibliotekene er mye anvendt for å gjøre dette.


Bruk av modale vinduer

Praktisk bruk av modale vinduer kjenner vi fra OS-miljøene fra både Windows og Apple, samt etterhvert også fra Linux med flere. Den nødvendige interaksjonen for å stenge av dialogvinduet er anvendbart på innlogging, lukke et program, lagre osv. Men bruk av modale vinduer til viktig informasjon på nettsider har blitt kritisert som ineffektivt, fordi brukerne blir bombardert med for mange dialogbokser (Wikipedia, 2016). Da et modalt vindu må lukkes for å komme videre, fokuserer brukeren oftest på den videre interaksjonen, nettopp som å klikke «Avbryt», «Lukk» eller «OK», istedenfor å lese eller forstå budskapet i modalvinduet.

Modale vinduer er ment å ta brukerens fulle oppmerksomhet. De blokkerer all interaksjon og arbeidsflyt inntil modalvinduet blir lukket av brukeren. Dessuten kan det bli komplikasjoner hvis vinduet ikke vises riktig i nettleseren. Det er derfor vanlig å la viktig informasjon bli i hovedvinduet og forelderapplikasjonen, mens modalvinduene brukes som alternativ til den veletablerte Lightbox-teknikken, som nå er et felles verktøy i webdesign.


Litt mer om modale vinduer

Modale vinduer blir ofte opprettet med JavaScript. Hver en front-end programmerer og webdesigner kan etterhvert stadfeste at dette ikke er den beste praksisen innenfor RWD-nettsider. Derfor har nå Lightboxes blitt mulig å programmere i full RWD. HTML5 og CSS3 tillater oss nå å lage modale vinduer med letthet. Eksempelet under bruker kun HTML5:

<dialog id="window">
	<h1>Hallo verden!</h1>
	<p>Dette modalvinduet er kun programmert i HTML5, og vises ikke i dokumentet med mindre du trykker «Vis dialogvinduet».</p>
	<button id="exit">Exit</button>	
</dialog>
<button id="show">Vis dialogvinduet</button>

Nettleseren Chrome trenger faktisk ikke CSS3 til å skjule informasjonen i dialog-elementet. Men dessverre er det ikke alle nettleserne som støtter «dialog» funksjonen over, selv ikke med CSS. Foreløpig er det derfor vanlig å kombinere HTML5 og CSS3 sammen med JavaScript.


Kilder