madr.se

Detta är ett arkiverat inlägg, som importerats hit för referens. Det kan se konstigt ut och innehålla utdaterad information eller inaktuella åsikter.

ModalWindow 0.1 - modalt fönster på ett enkelt sätt

Jag fick äran att skapa en egen lösning för Modalt fönster i ett projekt på jobbet. Resan var lång och besvärlig, men mycket lärorik.

Anledningen till att jag skrev ett eget script istället för att använda en av de många script som redan finns är att en rad egenskaper uteblir i dessa fönster.

Utifrån mitt jobbscript skapade jag ett nytt, ModalWindow 0.1. Det använder endast dLite och ligger på 3.4KB i produktion. Scriptet kan öppna fyra typer av innehåll: länkar via click, formulär via submit, egen HTML och klon av ett befintligt element i DOM-trädet. Detta görs via den generella funktionen ModalWindow.open.

ModalWindow.open (content, optionalOpener)

Exempel på användning

Länkar öppnas genom att tilldelas click-händelser. En preloader läggs intill den länk som klickades.

linkElm.onclick = ModalWindow.open;
addEvent(linkElm, 'click', ModalWindow.open);

Formulär skickas via onsubmit-händelser. En preloader läggs intill den submitknapp som skickade formuläret.

formElm.onsubmit = ModalWindow.open;
addEvent(formElm, 'submit', ModalWindow.open);

Egen HTML-kod kan skickas till scriptet via vilken händelse som helst, eller on-the-fly. För att placera preloadern skickas elementet som äger händelsen med som referens.

var sayHello = "<h3>Hej du!</h3><p>Kul att ses igen!</p%gt;";
addEvent(btnGreetings, 'click', function(){
   ModalWindow.open(sayHello, btnGreetings);
}

Scriptet kan klona ett befintligt element i DOM-trädet via vilken händelse som helst, eller on-the-fly. För att placera preloadern skickas elementet som äger händelsen med som referens.

var wiseWords = document.getElementById('wisdom');
addEvent(showWisdom, 'mouseover', function(){
   ModalWindow.open(wiseWords, showWisdom);
});

Ta en titt på ModalWindow 0.1 och testa klicka runt. JavaScriptfilen, Skärm-CSS och utskrifts-CSS bör vara av intresse!

Version 0.2 är redan på idéstadiet, med litet stöd för bla animeringar.