Modal window
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
- Wikipedia (2016-11-17). Modal window. [ONLINE] Tilgjengelig: https://en.wikipedia.org/wiki/Modal_window [9. januar 2017].
- Webdesigner Depot (2012-10-02). Creating a modal window with HTML5 & CSS3. [ONLINE] Tilgjengelig: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ [9. januar 2017].
- Thoriq Firdaus. Creating Modal Window Easily With HTML5 Dialog. [ONLINE] Tilgjengelig: http://www.hongkiat.com/blog/html5-dialog-window/ [9. januar 2017].
- w3schools.com. How To Make a Modal Box With CSS and JavaScript. [ONLINE] Tilgjengelig: http://www.w3schools.com/howto/howto_css_modals.asp [9. januar 2017].
- w3schools.com. How To Create a Lightbox. [ONLINE] Tilgjengelig: http://www.w3schools.com/howto/howto_js_lightbox.asp [9. januar 2017].