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.
- Beroenden av gigantiska JS-bibliotek. Ofta bygger scripten på Prototype+Script.aculo.us, Mootools eller JQuery, vilket leder till beroenden och uteslutning om det aktuella projektet använder ett annat bibliotek än scriptet.
- Dåligt stöd för fallbackläge. Kan påverka sökmotorers indexering och kan göra det svårt för skärmläsare.
- Stöd för utskrift av fönster saknas. När ett fönster är öppet ska dess innehåll gå att skriva ut ensamt, och det som ligger bakom bör inte finnas med på utskriften.
- För mycket lull-lull. De flesta script erbjuder externa sidor som
<iframe>, bildgallerier och flashfilmer. Det är något som alla inte alltid behöver och som drar på sig några extra KB som kan vara värdefulla. - Filuppladdning fungerar inte. Det som erbjuds är formulär i
<iframe>eller att man helt enkelt får klara sig utan det. - Otillräcklig kontroll över fönstret. Storleken på fönstret måste ofta vara fördefinerad, och CSS DOM är ibland nödvändigt. Det tycker inte jag är acceptabelt.
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.