Kode

Teknikker for å opprette Modal Windows

Modale vinduer beskrives mest som noe som fanger brukerens oppmerksomhet, og tillater ikke at de går tilbake til forrige tilstand før de samhandler med objektet i spørsmålet.

Nå er det litt innviklet, og jeg tror det er bedre adressert med noen få eksempler på nettsteder som bruker teknikken veldig bra. En av dem er Bygg det med meg som gjør det veldig bra. Hvis du går videre til deres nettsted og klikker på Registrer deg, vil du se et veldig bokstavelig eksempel på når en modalboks bare virker.

Ofte når man arbeider med modaler, pleier de å rydde opp brukergrensesnitt og forsøke å forbedre brukerens opplevelse, men det er viktig å huske at noen ganger gjør de det motsatte. Vurder irriterende nettsteder med for mange JavaScript-popup-filer eller nettsøppel som faktisk bekrefter at du vil forlate nettstedet. Det er latterlig, og nettsteder som gjør disse tingene er absolutt ikke-go, så sørg for at du vet hvordan du bruker modale dialoger før du går videre med implementeringen.

For å gi deg et bedre eksempel på hvordan du gjør dem riktig, snakker vi teori - etterpå vil vi komme inn på eksempler for å vise deg hvordan du implementerer dem i responsiv design. Så la oss hoppe rett inn i noen teori.

Modalteori

Den grunnleggende teorien om brukergrensesnittelementet for moduler kan være ganske sammenvunnet med andre brukergrensesnitt som vi kun vil ta kontakt med her. I utgangspunktet er det vi må se hvor vi trenger en bruker til å klikke på en bestemt del av nettstedet, og å fokusere spesielt på kun den delen til ferdigstillelsen av oppgaven den delen gir.

Nå kan dette brukes til mange forskjellige ting, for eksempel brukerinnlogginger, skjemaelementer, nedlastingssider, eller det kan være å bare vise et bilde og se på det fotoets kommentarer. Facebook bruker dette til å hjelpe deg med å fokusere på samhandling når du klikker på et bilde, men selvfølgelig lar de deg også sykle gjennom bildene der. Du kan klikke på dem, og så tar det bort all evnen til å samhandle med hovedsiden til du enten klikker utenom modalboksen eller klikker på "x" for å returnere.

Grunnleggende modalteori er imidlertid veldig interessant, og er avhengig av de prinsippene vi nettopp har rørt på. La oss gå gjennom en brukskasse, slik at du kan få en bedre ide om når og hvorfor du skal bruke en.

La oss si at du kjører et nettsted der brukerne kan registrere seg og logge inn på lagringsplassen de har leid fra deg (online lagring). Vel, du som et selskap er ganske utrolig avhengige av at brukerne har en god flyt fra landing på hjemmesiden din for å logge inn. Da det er en av de viktigste tingene du tilbyr, vil du at brukeren skal føle seg tvunget til å logge inn og faktisk gjør det utrolig enkelt for dem å gjøre det.

På grunn av det kan du ha en stor påloggingslink på hjemmesiden din, eller en faktisk del for dem å gjøre det på hjemmesiden, kanskje i overskriften. Selv om problemet med disse er, er det i sistnevnte tilfelle ikke peket på innloggingen, og i det første er brukeren ikke tvunget til å ta en avgjørelse.

Nå tolererer jeg ikke tvingende brukere til å gjøre noe, men forsiktig nudging dem er helt bra - og det er det jeg mente med "tvunget". Så hva du kan gjøre er å ha en innloggingskobling som trekker ned et modalt vindu med påloggingsskjemaet der ute. På den måten må de aldri navigere bort fra hjemmesiden og deretter navigere tilbake (via eksemplet vi oppgav for et øyeblikk siden), og de er også 100% klar over hva de skal gjøre inne i modal.

Det er en veldig fin måte å gå på å hjelpe brukerne til å forstå hva som skjer og hvorfor det skjer. Jeg må si at jeg har brukt det selv for klienter, og beholdningsraten fra startside landing til login har økt med 35% tidligere som jeg har sett. Og de er absolutt ikke tall for å riste en pinne på; De er virkelig verdifulle og tydelig definerte beregninger på hvor mye et enkelt modalvindu kan øke oppbevaring og redusere studsfrekvensen.

Koding av et grunnleggende modalvindu

La oss dykke rett inn i noen kode, men for nå se bort fra hvilken type modal type vi skal bruke og alle tekniske detaljer, og la oss bare fokusere på kjernenes grunnleggende. HTML, CSS og jQuery er det vi skal fokusere på for nå.

HTML-elementene

Det er to grunnleggende elementer vi trenger, en kobling for å åpne vinduet og selve vinduet. Lenken skal se slik ut:

Deretter må vi legge til et andre vindu:

Legg merke til at begge vindu divene er pakket inn av div med id modal. Legg også merke til at ID til det første modalvinduet samsvarer med href av den første lenken og at ID for det andre modalvinduet samsvarer med href av den andre lenken; Det er slik koblingene vil målrette riktig vindu når vi kommer til jQuery.

CSS-elementene

Vi må stilere tre elementer av våre 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 koden stiler div med klassens innhold (det er det som pakker inn alt innholdet vårt). Du kan stilte innholdet ditt her, akkurat som du ville noe annet sted på siden. Jeg vil anbefale minst en liten polstring, fordi typografiske regler dikterer at alt innhold trenger å puste.

Deretter skal vi style blinden. "Hvem, hold på. Hva er en blind? ' Jeg hører deg gråte. Det er veldig enkelt: en blind er motsatt av en maske, vi bruker den til å tømme ut resten av siden mens vinduet er synlig. Og nei, vi har ikke opprettet det i vårt oppslag, jQuery vil gjøre det for oss. For nå trenger vi bare å gi en stil for den slik at den dekker hele vinduets innhold og viktigst sett sitter over resten av innholdet 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;}

Til slutt for CSS, må vi stille inn vinduet vårt selv. Vi må plassere vinduet over blinde. Da må vi størrelse det med bredde og høydeegenskaper.

Deretter må vi sette marginen til halvparten av bredden multiplisert med -1 (400/2 * -1 = -200), og margin-toppen med halv høyde multiplisert med -1 (248/2 * -1 = -124). Senere skal vi bruke jQuery til å plassere elementet øverst: 50% og venstre: 50%, på grunn av disse negative margene ser vinduet ut til å være sentrert uavhengig av nettleserdimensjonene, og vi må ikke prøve posisjoner den basert på nettleserens størrelse.

Deretter må vi sette venstre og øverste egenskaper til -1000px. Hvorfor vil vi gjøre det? Vel, vi ønsker ikke at modalvinduet skal være synlig før lenken er klikket. En annen vanlig teknikk er å sette display: ingen i CSS, men nylig som har begynt å bli misbrukt av spammere, og det kan nå bli flagget av søkemotorer som en svart hattteknikk, spesielt hvis du har mange søkeord i din modal. Ved å sette den til å plassere godt avskjerm i stedet, oppnår vi det samme.

Til slutt vil vi farge vinduet en passende sidefarge, hvit i dette tilfellet.

Og bare for godt mål, hvorfor ikke dukkert også inn i CSS3 og kast på en bokseskygge bare for å virkelig få det til å stikke ut av skjermen - det er ikke misjonskritisk og vil bli ignorert hvis det ikke stø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

Til slutt skal vi legge til noe jQuery for å drive modal. Det vi trenger å gjøre er å fange klikk på koblingene; finn det tilsvarende vinduet og fade det inn, og skape en blind bak vinduet som forhindrer klikk på annet innhold. og til slutt en funksjon for å lukke modal som kan utløses av vår nære knapp eller ved å klikke utenfor vinduet.

Først må vi bare kjøre skriptet når dokumentet er klart 

$(document).ready(function(){

Definer deretter en variabel for å holde en referanse til vinduet 

var activeWindow;

Deretter legger du til en klikkbehandler til koblingene, den funksjonen forhindrer standard koblingsadferd identifiser det tilsvarende vinduet fra href-attributtet til lenken; tilordne den til aktivWindow-variabelen; Flytt vinduet til sentrum av nettleseren (husk de negative marginene i CSS? Dette er hvor de jobber med magien deres, fordi alt vi trenger å sette er 50% for å få sentrum) og fade det inn opprett en ny div med id'en 'blind', fade det inn og legg til en klikkhåndterer av seg selv som vil kalle funksjonen 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();});});

Deretter må vi legge til en klikkbehandler til lukkeknappene for å kalle samme closeModal () -funksjon som klikket på den blinde. 

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

Sist men ikke minst, må vi opprette closeModal () -funksjonen som vil returnere oss til vår opprinnelige tilstand. Det må forsvinne ut av vinduet og flytte det tilbake til startposisjonen når overgangen fullfører, og samtidig fade ut blinde og fjerne den fra DOM når overgangen fullfører. 

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

Ikke glem å lukke $ (dokument) .ready handler! 

});

For de som foretrekker å lære ved å kopiere og lime, er her hele skriptet: 

// 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økkelen til denne prosessen er å skille modalvinduet i sine tre komponenter: data (HTML), stil (CSS) og funksjonalitet (jQuery). Det er tusenvis av variasjoner du kan bruke til å bygge videre på denne kjerneteknikken, og vi vil gjerne lese om noen av dine erfaringer i kommentarene nedenfor.

Hva er de beste eksemplene på modale vinduer du har sett? Hva er din favorittteknikk for å lage dem? Gi oss beskjed i kommentarene!

css koding jquery html modale vinduer