HTML-guide til udvikling af integrationsløsninger til Borger.dk
Modalbokse
Modalbokse er besked eller handlings-bokse, som lægger sig ovenpå en side. Modalbokse kan bruges i forbindelse med, at en bruger skal have en vigtigt information eller udføre en handling.
Modal-bokse må ikke benyttes i iframe-integrationer.
Grundskabelon
Klassen modal benyttes på modalbokse med følgende HTML-struktur. Klassen modal-backdrop benyttes på en tom div til at lægge et lag over siden.
Man bør være særlig opmærksom på tilgængelighed ved modalbokse på to områder. For det første skal skal man sikre, at brugeren ikke kan tabbe sig ud af modal-boksen uden at der er taget stilling til dens indhold. For det andet bør det det link, der aktiverer en modalboks få fokus, når boksen lukkes.
<div class="modal-backdrop"></div> ... <div tabindex="-1" role="dialog" class="modal"> <div class="modal-header"> <button type="button" class="close">×<span class="accessibility">Luk</span></button> <h3>Overskrift</h3> </div> <div class="modal-body">Indhold</div> <div class="modal-footer"> <button class="btn">Luk</button> </div> </div>
Modal med javascript
Twitter Bootstrap, som HTML-guiden baseres på, indeholder et javascript, som det tilrådes at benytte, såfremt det er muligt. Scriptet skal inkluderes sammen med Jquery for at virke korrekt.
I nedenstående eksempel er der indsat en modalboks i siden DOM med et id (borgerModal). Modalboksen aktiveres med et klik på knappen "Åbn modal-boks".
<script="[sti til jquery.js]"></script> <script="[sti til bootstrap.js]"></script> ... <a href="#ModalEx1" role="button" data-toggle="modal" class="btn btn">Åbn modal-boks </a> ... <div id="ModalEx1" tabindex="-1" role="dialog" aria-labelledby="borgerModal" aria-hidden="true" class="modal hide fade"> <div class="modal-header"> <h3>Velkommen til HTML-guiden</h3> </div> <div class="modal-body"> <p>Denne guide er tiltænkt udviklere og projektledere, der står overfor at skulle udvikle eller opdatere løsninger, der er integreret i Borger.dk herunder Min Side.</p> <p>Guiden behandler både de overordnede designprincipper men også formatteringen af enkelte HTML-elementer.</p> </div> <div class="modal-footer"> <button data-dismiss="modal" class="btn">Luk</button> </div> </div>Åbn modal-boks
Der henvises til Twitter Bootstrap for gennemgang af yderligere konfigurationsmuligheder.
Modal der åbner automatisk
Med attributten data-autoshow="false|true" kan angives, hvorvidt en modal skal vises, når siden hentes. Hertil kræves en funktion, der tjekker, hvorvidt attributten er sat (her er med Jquery):
Link med autoshow-atrributten:
<a href="#ModalEx1" data-autoshow="true" role="button" data-toggle="modal" class="btn btn">Åbn modal-boks</a>
Javascript, der finder attributten, når siden hentes:
$(document).ready(function() {
$('[data-toggle="modal"]').each(function(){
if($(this).data('autoshow') === true){
$(this).trigger('click');
}
});
});
Genbrugelig modal
En genbrugelig modal har to fordele. For det første lægger der ikke diverse skjulte modals med indhold i DOM'en, som venter på at blive aktiveret af brugeren. For det andet kan modalboksen populeres med indhold fra forskellige kilder, når det er nødvendigt.
Nødvendigt javascript, der skal inkluderes:
<script="[sti til jquery.js]"></script> <script="[sti til bootstrap.js]"></script>
Modalboks sat ind med HTML:
<div id="ModalEx2" tabindex="-1" role="dialog" aria-labelledby="ModalEx2" aria-hidden="true" class="modal hide fade"> <div class="modal-header"></div> <div class="modal-body"></div> <div class="modal-footer"></div> </div>
Modalboks kan også indsættes med javascript (jquery):
// Modalbokskoden gemmes i en variabel var modalBoks = ''; // .. og tilføjes body-elementet $('body').append(modalBoks);
Javascript (jquery) der håndterer, at modalboksen kan populeres af indhold:
// Gem det element, hvorfra modalboksen aktiveres fra
var envoker;
$('[data-toggle="modal"]').on('click', function(){
envoker = $(this);
});
// Indsæt indhold i modalboksen
$('#ModalEx2').on('show', function () {
var opt = $(this).data('modal').options,
header = $(this).find('.modal-header'),
footer = $(this).find('.modal-footer'),
body = $(this).find('.modal-body');
if(opt.header){
header.show().html(opt.header);
}else{
header.hide();
}
if(opt.footer){
footer.show().html(opt.footer);
}else {
footer.hide();
}
if(opt.body){
body.show().html(opt.body);
}else {
body.hide();
}
if(opt.remote){
body.show();
}
}).on('hidden', function(){
// Tøm modalboksen for indhold, når den lukkes
$(this).removeData('modal');
// Sæt fokus på det element, hvorfra modalboksen blev aktiveret
envoker.focus();
});
Modalboksen kan populeres med indhold, der kommer fra et link:
<a href="#" data-target="#ModalEx2" data-toggle="modal" data-autoshow="false" data-header="<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button><h3>Modal header</h3>" data-footer="<button class='btn' data-dismiss='modal' aria-hidden='true'>Luk</button>" data-body="Jeg blev populeret af linket" class="btn">Link der populerer modalboks</a>
Eller fra en ekstern kilde:
<a href="modal-ekstern.html" data-target="#ModalEx2" data-toggle="modal" data-header="<h3>Ekstern modal header</h3>" data-footer="<button class='btn' data-dismiss='modal' aria-hidden='true'>Luk</button>" class="btn">Ekstern Modal</a>
Den eksterne kilde (modal-ekstern.html):
<p>Dette indhold kommer fra den eksterne fil, som hedder modal-ekstern.html</p>