Koda

Tekniker för att skapa modala Windows

Modala fönster beskrivs mest som allt som tar användarens uppmärksamhet och låter dem inte återgå till föregående tillstånd tills de interagerar med objektet i fråga.

Nu är det lite trångt och jag tycker att det är bättre att ta itu med några exempel på webbplatser som använder tekniken riktigt bra. En av dem är Bygg det med mig vilket gör det riktigt bra Om du går vidare till sin webbplats och klickar på Registrera, kommer du att se ett mycket bokstavligt exempel på när en modalbox bara fungerar.

Ofta när man arbetar med modaler används de för att städa upp användargränssnitt och försöka förbättra användarens upplevelse - men det är viktigt att komma ihåg att ibland gör de exakt motsatsen. Tänk på irriterande webbplatser med för många JavaScript-popup-filer eller spam-webbplatser som faktiskt bekräftar att du vill lämna webbplatsen. Det är löjligt, och webbplatser som gör dessa saker är absolut en nöje, så se till att du vet hur man använder modala dialoger innan man går vidare med genomförandet.

För att ge dig ett bättre exempel på hur du gör dem rätt, kommer vi att prata teori - sedan kommer vi att få in exempel för att visa hur du implementerar dem i lyhörd design. Så låt oss hoppa direkt in i någon teori.

Modalteori

Grundteorin för användargränssnittet för modaler kan vara ganska sammanflätade med andra UI-teorem som vi bara kommer att tangentera här. I grund och botten är det vi behöver att vi har där vi behöver en användare för att klicka på en viss del av webbplatsen och att fokusera särskilt på den sektionen tills fullföljandet av den uppgift som avsnittet erbjuder.

Nu kan det här användas för många olika saker som användarinloggningar, formulärelement, nedladdningssidor, eller det kan vara att helt enkelt visa ett foto och titta på fotonets kommentarer. Facebook använder det här för att hjälpa dig att fokusera på interaktion när du klickar på ett foto, men det låter du naturligtvis också cykla genom bilderna där. Du kan klicka på dem, och sedan tar det bort all förmåga att interagera med huvudsidan tills du antingen klickar utanför modulrutan eller klickar på "x" för att återvända.

Grundmodellteori är dock väldigt intressant och bygger verkligen på de principer vi bara berörde. Låt oss gå igenom ett användningsfall så att du kan få en bättre uppfattning om när och varför att använda en.

Låt oss säga att du kör en webbplats där användarna kan registrera och logga in i deras lagring som de har hyrt från dig (lagring online). Tja, du som företag är ganska otroligt beroende av att de användare har ett bra flöde från att landa på din hemsida för att logga in. Eftersom det är en av de viktigaste sakerna som din webbplats erbjuder, vill du att användaren ska känna sig tvungen att logga in och gör det verkligen otroligt enkelt för dem att göra det.

På grund av det kan du ha en stor inloggningslänk på din hemsida, eller en faktisk del för dem att göra det på hemsidan, kanske i rubriken. Även om problemet med dem är, så är användaren i det senare fallet inte pekad på inloggningen, och i det förra är användaren inte tvungen att fatta ett beslut.

Nu tillåter jag inte att tvinga användarna att göra något annat än att försiktigt knyta dem är helt bra - och det är vad jag menade med att "tvingas". Så vad du kan göra är att ha en inloggningslänk som drar ner ett modalfönster med inloggningsformuläret där. På så sätt måste de aldrig navigera från hemsidan och sedan navigera tillbaka (via det exempel vi förutsåg för en stund sedan), och de är också 100% medvetna om vad de ska göra inne i modalet.

Det är ett mycket trevligt sätt att gå om att hjälpa användare att förstå vad som händer och varför det händer. Jag måste säga att jag har använt det själv för kunder och retentionen från hemsidan landning till inloggning har ökat med 35% tidigare som jag har sett. Och det är säkert inga siffror att skaka en käpp på; De är verkligen värdefulla och tydligt definierade mätvärden på hur mycket ett enkelt modalfönster kan öka retentionen och minska studsfrekvensen.

Kodning av ett grundläggande modalfönster

Låt oss dyka rätt in i någon kod, men för närvarande ignorera vilken typ av modaltyp vi ska använda och alla tekniska detaljer, och låt oss bara fokusera på grundläggande grunderna. HTML, CSS och jQuery är det vi ska fokusera på för nu.

HTML-elementen

Det finns två grundläggande delar vi behöver, en länk för att öppna fönstret och fönstret självt. Länken kommer att se ut så här:

Därefter måste vi lägga till ett andra fönster:

Observera att båda fönsterdivorna är inslagna av div med id-modal. Observera också att id för det första modala fönstret matchar href för den första länken och att id för det andra modala fönstret matchar href för den andra länken; så är länkarna riktade mot rätt fönster när vi kommer till jQuery.

CSS-elementen

Vi måste utforma tre delar av våra modala fönster, vi börjar med det enklaste: 

#modal .contents{/* style the modal's contents, in this case we're just adding padding */padding:24px;}

Den här koden formaterar div med klassens innehåll (det vill säga det som innehåller alla våra innehåll). Du kan utforma ditt innehåll här, precis som du skulle någon annanstans på sidan. Jag rekommenderar åtminstone lite vaddering, eftersom typografiska regler dikterar att allt innehåll behöver andas.

Därefter ska vi stilla blinden. "Vem, håll på. Vad är en blind? " Jag hör dig gråta. Det är mycket enkelt: en blind är motsatsen till en mask, vi använder den för att tömma resten av vår sida medan fönstret är synligt. Och nej, vi har inte skapat det i vår markering, jQuery kommer att göra det för oss. För nu behöver vi bara skapa en stil för den så att den täcker hela fönsters innehåll och viktigast sett sitter ovanför resten av innehållet på z-axeln. 

#blind{/* position element so the z-index can be set */position:absolute;/* set z-index so the blind will cover all page content */z-index:9999;/* set the top, left, width and height so the blind covers the browser window */top:0;left:0;width:100%;height:100%;/* set the background to a suitably dark tone */background-color:#000000;}

Slutligen för CSS måste vi stilla vårt fönster i sig. Vi måste placera fönstret ovanför blinden. Då måste vi dimensionera den med bredd och höjd egenskaper.

Därefter måste vi ställa in marginalen till halv bredden multiplicerad med -1 (400/2 * -1 = -200) och marginal-toppen med halva höjden multiplicerad med -1 (248/2 * -1 = -124). Senare kommer vi att använda jQuery för att placera elementet i topp: 50% och vänster: 50%, på grund av dessa negativa marginaler verkar fönstret centreras oberoende av webbläsarens dimensioner och vi behöver inte försöka positionera den baserat på webbläsarens storlek.

Därefter måste vi ställa in vänster och övre egenskaper till -1000px. Varför skulle vi vilja göra det? Tja, vi vill inte att modalfönstret ska vara synligt tills länken är klickad. En annan vanlig teknik är att ställa in displayen: ingen i CSS men nyligen som har börjat missbrukas av spammare och den kan nu flaggas av sökmotorer som en svart hattteknik, speciellt om du har många nyckelord i din modal. Genom att ställa in det för att placera en bra skärm istället, uppnår vi samma sak.

Slutligen vill vi färga fönstret en lämplig sidfärg, vit i det här fallet.

Och bara för bra mått, varför inte också dyka in i CSS3 och kasta på en boxskugga bara för att verkligen få den att dyka upp från skärmen - den är inte missionskritisk och kommer att ignoreras om den inte stöds. 

#modal .window {/* position the element so that the z-index can be applied */position:absolute;/* Set the z-index to a number higher than the blind's z-index */z-index:10000;/* set the width and height of the window */width:400px;height:248px;/* give the window negative margins that match the width/2 and height/2 so it is centered */margin-left:-200px;margin-top:-124px;/* position the top left corner off stage so it can't be seen (instead of display:none;) */left:-1000px;top:-1000px;/* color the background so it shows up */background-color:#ffffff;/* throw on a CSS3 box shadow, because it's cool, and we can */box-shadow:4px 4px 80px #000;-webkit-box-shadow:4px 4px 80px #000;-moz-box-shadow:4px 4px 80px #000;}

JQuery

Slutligen kommer vi att lägga till några jQuery för att driva modal. Vad vi behöver göra är att fånga klick på länkarna. leta efter motsvarande fönster och sedan blekna det, skapa en blind bakom fönstret som förhindrar klick på annat innehåll. och slutligen en funktion för att stänga modal som kan utlösas av vår nära knapp eller genom att klicka utanför fönstret.

Först måste vi bara köra skriptet när dokumentet är klart 

$(document).ready(function(){

Definiera därefter en variabel för att hålla en referens till fönstret 

var activeWindow;

Lägg sedan till en klickhanterare på länkarna, den funktionen kommer att förhindra standardlänkbeteendet. identifiera motsvarande fönster från länkens href-attribut Tilldela den till ActiveWindow-variabeln; flytta fönstret till mitten av webbläsaren (kom ihåg de negativa marginalerna i CSS? Det är här de jobbar med sin magi eftersom allt vi behöver sätta är 50% för att få centret) och blekna det. skapa en ny div med id "blind", blekna det och bifoga en egen handhanterare som kallar funktionen closeModal (). 

$('a.modalLink').click(function(e){e.preventDefault();var id = $(this).attr('href');activeWindow = $('.window#' + id).css('opacity', '0').css('top', '50%').css('left', '50%').fadeTo(500, 1);$('#modal').append('
').find('#blind').css('opacity', '0').fadeTo(500, 0.8).click(function(e){closeModal();});});

Nästa måste vi lägga till en klickhanterare på stängknapparna för att ringa samma closeModal () -funktion som klicket på den blinda. 

$('a.close').click(function(e){e.preventDefault();closeModal();});

Sist men inte minst måste vi skapa funktionen closeModal () som kommer att returnera oss till vårt ursprungliga tillstånd. Det måste tona ut genom fönstret och flytta tillbaka till startpositionen när övergången är färdig och samtidigt blekna blinden och ta bort den från DOM när övergången är klar. 

function closeModal() {activeWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });$('#blind').fadeOut(250,    function(){ $(this).remove(); });}

Glöm inte att stänga din $ (dokument) .ready handler! 

});

För dem som föredrar att lära sig genom att kopiera och klistra in, här är det fullständiga manuset: 

// run when page is ready$(document).ready(function(){// create variable to hold the current modal windowvar activeWindow;$('a.modalLink').click(function(e){// cancel the default link behavioure.preventDefault();// find the href of the link that was clicked to use as an idvar id = $(this).attr('href');// assign the window with matching id to the activeWindow variable, move it to the center of the screen and fade inactiveWindow = $('.window#' + id).css('opacity', '0') // set to an initial 0 opacity.css('top', '50%') // position vertically at 50%.css('left', '50%') // position horizontally at 50%.fadeTo(500, 1); // fade to an opacity of 1 (100%) over 500 milliseconds// create blind and fade in$('#modal').append('
') // create a 
 with an id of 'blind'.find('#blind') // select the div we've just created.css('opacity', '0') // set the initial opacity to 0.fadeTo(500, 0.8) // fade in to an opacity of 0.8 (80%) over 500 milliseconds.click(function(e){closeModal(); // close modal if someone clicks anywhere on the blind (outside of the window)});});$('a.close').click(function(e){// cancel default behavioure.preventDefault();// call the closeModal function passing this close button's windowcloseModal();});function closeModal(){// fade out window and then move back to off screen when fade completesactiveWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });// fade out blind and then remove it$('#blind').fadeOut(250,    function(){ $(this).remove(); });}});

Nyckeln till processen är att skilja modalfönstret i sina tre komponenter: data (HTML), stil (CSS) och funktionalitet (jQuery). Det finns tusentals variationer som du kan använda för att bygga på denna kärnteknik och vi skulle gärna läsa om några av dina erfarenheter i kommentarerna nedan.

Vilka är de bästa exemplen på modala fönster du har sett? Vad är din favorit teknik för att skapa dem? Låt oss veta i kommentarerna!

css kodning jQuery html modala fönster