Kode

Teknikker til oprettelse af Modal Windows

Modale vinduer beskrives mest almindeligt som noget, der fanger brugerens opmærksomhed, og tillader ikke, at de vender tilbage til den tidligere tilstand, indtil de interagerer med det pågældende objekt.

Nu er det lidt sammenfaldende, og jeg synes, det er bedre adresseret med et par eksempler på hjemmesider, der bruger teknikken rigtig godt. En af dem er Byg det med mig hvilket gør det rigtig godt Hvis du går videre til deres websted og klikker på Tilmeld dig, vil du se et meget bogstaveligt eksempel på, hvornår en modalbox kun virker.

Ofte når man arbejder med modeller, bruges de til at rydde op brugergrænseflader og forsøge at forbedre brugerens oplevelse - men det er vigtigt at huske, at de undertiden gør det nøjagtige modsatte. Overvej irriterende websteder med for mange JavaScript popups eller spam websteder, der faktisk bekræfter, at du vil forlade webstedet. Det er latterligt, og websteder, der gør disse ting, er absolut en no-go, så sørg for at vide, hvordan man bruger modale dialoger, inden man går videre med implementeringen.

For at give dig et bedre eksempel på, hvordan man gør dem rigtigt, vil vi tale teori - så bagefter vil vi komme ind i eksempler for at vise dig, hvordan du implementerer dem i lydhør design. Så lad os hoppe lige ind i nogle teorier.

Modal teori

Grundlæggende teori om brugergrænsefladeelementet for modaler kan være ret sammenflettet med andre UI-sætninger, som vi kun vil tangentielt røre her. I det væsentlige er det, vi kigger på, en nødvendighed, at vi har brug for en bruger til at klikke på en bestemt sektion af webstedet og at fokusere især på kun den sektion, indtil afslutningen af ​​den opgave, som sektionen tilbyder.

Nu kan dette bruges til mange forskellige ting som bruger login, formelementer, download sider, eller det kan være at blot vise et billede og se på det pågældende fotos kommentarer. Facebook bruger dette til at hjælpe dig med at fokusere på interaktion, når du klikker på et foto, men selvfølgelig tillader de dig også at cykle gennem billederne der. Du kan klikke på dem, og så tager det væk al evnen til at interagere med hovedsiden, indtil du enten klikker uden for modalboksen eller klikker på "x" for at vende tilbage.

Grundmodelteori er dog meget interessant, og er virkelig afhængig af de principper, vi lige har rørt på. Lad os gå gennem en brugssag, så du kan få en bedre ide om hvornår og hvorfor du bruger en.

Lad os sige, at du driver et websted, hvor brugerne kan registrere og logge ind på deres lagerplads, som de har lejet fra dig (online-opbevaring). Nå er du som en virksomhed temmelig utroligt afhængig af, at de brugere har en god strøm fra at lande på din hjemmeside for at logge ind. Da det er en af ​​de vigtigste ting, dit websted tilbyder, vil du gerne have brugeren at føle sig tvunget til at logge ind og Faktisk gør det utrolig nemt for dem at gøre det.

På grund af det kan du have et stort log-in-link på din hjemmeside eller en faktisk sektion for dem at gøre det på hjemmesiden, måske i overskriften. Selvom problemet med dem er, at i sidstnævnte tilfælde er brugeren ikke peget på login i alligevel, og i det førstnævnte er brugeren ikke tvunget til at træffe en beslutning.

Nu indrømmer jeg ikke at tvinge brugere til at gøre noget, men forsigtigt nudging dem er helt fint - og det er hvad jeg mente med "tvunget". Så hvad du kunne gøre er at have et login-link, der trækker et modalt vindue sammen med login-formularen lige derpå. På den måde behøver de aldrig at navigere væk fra hjemmesiden og derefter navigere tilbage (via det eksempel, vi sagde for et øjeblik siden), og de er også 100% opmærksomme på, hvad de skal gøre inde i modalet.

Det er en meget god måde at gå på at hjælpe brugerne med at forstå, hvad der sker, og hvorfor det sker. Jeg må sige, jeg har brugt det selv til kunder, og tilbageholdelsesraten fra hjemmesiden landing til login er steget med 35% tidligere, som jeg har set. Og disse er bestemt ikke tal til at ryste en pind på; de er virkelig værdifulde og klart definerede metrics om, hvor meget et simpelt modalvindue kan øge tilbageholdelsen og reducere afvisningshastigheden.

Kodning af et grundlæggende modalvindue

Lad os dykke lige ind i nogle kode, men for nu se bort fra hvilken slags modaltype, vi skal bruge og alle tekniske aspekter, og lad os bare fokusere på grundlæggende grunde. HTML, CSS og jQuery er, hvad vi vil fokusere på for nu.

HTML-elementerne

Der er to grundlæggende elementer, vi har brug for, et link til at åbne vinduet og selve vinduet. Linket vil se sådan ud:

Dernæst skal vi tilføje et andet vindue:

Bemærk at begge vindues divs er indpakket af div med id modal. Bemærk også, at id for det første modalvindue matcher href for det første link, og at id'et af det andet modalvindue matcher href for det andet link; Sådan knytter linkene sig til det rigtige vindue, når vi kommer til jQuery.

CSS elementerne

Vi skal style tre elementer i vores modale vinduer, vi starter med det enkleste: 

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

Denne kode formaterer div med klassen 'indhold' (det er den ene, der indpakker alt vores indhold). Du kan style dit indhold her, ligesom du ville andre steder på siden. Jeg vil anbefale mindst en lille polstring, fordi typografiske regler dikterer, at alt indhold skal indånde.

Dernæst vil vi style blinde. "Hvem, hold fast. Hvad er en blind? ' Jeg hører dig græde. Det er meget simpelt: en blind er det modsatte af en maske, vi bruger den til at udtømme resten af ​​vores side, mens vinduet er synligt. Og nej, vi har ikke oprettet det i vores markering, jQuery vil gøre det for os. For nu skal vi bare stille en stil til den, så den dækker hele vinduets indhold og vigtigst set sidder over resten af ​​indholdet på z-aksen. 

#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;}

Endelig for CSS, skal vi stilere vores vindue selv. Vi skal placere vinduet over blinde. Så skal vi dimensionere det med bredde og højdeegenskaber.

Dernæst er vi nødt til at indstille margenen til venstre for halv bredden ganget med -1 (400/2 * -1 = -200) og margen-toppen med halv højden ganget med -1 (248/2 * -1 = -124). Senere skal vi bruge jQuery til at placere elementet øverst: 50% og venstre: 50% På grund af disse negative margener ser vinduet ud til at være centreret uanset browserens dimensioner, og vi bliver ikke nødt til at prøve position det baseret på browserstørrelsen.

Næste skal vi indstille venstre og øverste egenskaber til -1000px. Hvorfor vil vi gerne gøre det? Nå, vi vil ikke have det modale vindue til at være synligt, indtil linket er klikket. En anden almindelig teknik er at indstille display: ingen i CSS, men for nylig, der er begyndt at blive misbrugt af spammere, og det kan nu markeres af søgemaskiner som en sort hat teknik, især hvis du har mange søgeord i din modal. Ved at indstille den til at placere godt skærm i stedet opnår vi det samme.

Endelig ønsker vi at farve vinduet en passende sidefarve, hvid i dette tilfælde.

Og bare for god foranstaltning, hvorfor ikke også dyppe ind i CSS3 og smide på en bokseskygge bare for virkelig at få det til at springe ud af skærmen - det er ikke missionskritisk og vil blive ignoreret, hvis det ikke understøttes. 

#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

Endelig vil vi tilføje nogle jQuery til magt modal. Hvad vi behøver at gøre er at fange klik på linkene; Find det tilsvarende vindue og bliv derefter det ind, og skab en blind bag vinduet, der forhindrer klik på andet indhold. og endelig en funktion til at lukke modal, der kan udløses af vores tætte knap eller ved at klikke udenfor vinduet.

Først skal vi kun køre scriptet, når dokumentet er klar 

$(document).ready(function(){

Definer derefter en variabel for at holde en reference til vinduet 

var activeWindow;

Tilføj derefter en klikhandler til linkene, den funktion forhindrer standard linkadfærd; identificer det tilsvarende vindue fra linket href-attributten tildele det til aktivWindow-variablen; Flyt vinduet til midten af ​​browseren (husk de negative marginer i CSS? Det er her, hvor de arbejder deres magi, fordi alt vi skal sætte er 50% for at få centeret) og falme det ind opret en ny div med id'en 'blind', bliv den i og vedhæft en egen håndhandler, der kalder 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();});});

Dernæst skal vi tilføje en klikhandler til de lukkede knapper for at kalde den samme closeModal () -funktion som klik på den blinde. 

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

Sidst men ikke mindst, vi har brug for at oprette funktionen closeModal (), der vender tilbage til vores oprindelige tilstand. Det er nødt til at falme ud af vinduet og flytte det tilbage til sin startposition, når overgangen er færdig, og samtidig udtænke blinden og fjerne den fra DOM'en, når overgangen fuldender. 

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

Glem ikke at lukke din $ (dokument) .ready handler! 

});

For dem, der foretrækker at lære ved at kopiere og indsætte, er her det fulde script: 

// 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(); });}});

Nøglen til denne proces er at adskille modalvinduet i dets tre komponenter: data (HTML), stil (CSS) og funktionalitet (jQuery). Der er tusindvis af variationer, som du kan bruge til at bygge videre på denne kerne teknik, og vi vil gerne læse om nogle af dine oplevelser i kommentarerne nedenfor.

Hvad er de bedste eksempler på modale vinduer, du har set? Hvad er din yndlings teknik til at skabe dem? Lad os vide i kommentarerne!

css kodning jquery html modale vinduer