Modaalisia ikkunoita kuvataan yleisimmin sellaiseksi, joka tarttuu käyttäjän huomion piiriin, eikä salli niiden palata edelliseen tilaan, ennen kuin ne ovat vuorovaikutuksessa kyseessä olevan kohteen kanssa.

Nyt se on hieman sekava ja mielestäni parannetaan paremmin muutama esimerkki verkkosivustoista, jotka käyttävät tekniikkaa todella hyvin. Yksi niistä on Rakenna se kanssani mikä tekee siitä todella hyvin. Jos pääset yli heidän sivustoonsa ja napsautat Rekisteröidy, näet hyvin kirjaimellisen esimerkin siitä, milloin modaalilaatikko toimii.

Usein tapauksissa, kun työskentelet modaalien kanssa, niitä käytetään käyttäjien käyttöliittymien puhdistamiseen ja yrittää parantaa käyttäjän kokemuksia - mutta on tärkeää muistaa, että joskus he tekevät tarkka päinvastainen. Harkitse ärsyttäviä verkkosivustoja, joissa on liian monta JavaScript-ponnahdusikkunaa tai roskapostikuvia, jotka todella vahvistavat, että haluat poistua sivustosta. Se on naurettavaa, ja sivustot, jotka tekevät näitä asioita, ovat ehdottomasti no-go, joten varmista, että tiedät, miten käyttää vuorovaikutusta vuorovaikutuksessa ennen kuin etene eteenpäin toteutuksen kanssa.

Jotta voisimme antaa paremman esimerkin siitä, miten ne tapahtuvat oikein, puhumme teorian - ja sen jälkeen saamme esimerkkejä osoittamaan, miten ne voidaan toteuttaa reagoivaan muotoiluun. Joten hyppäämme oikeaan tiettyyn teoriaan.

Modaliteoria

Modaalien käyttöliittymäelementin perusteorian voi olla melko kietoutunut muihin UI-teoreemeihin, joihin me tangentiaalisesti koskettamme täällä. Pohjimmiltaan se, mitä tarkastelemme, on välttämätöntä, että meillä on silloin, kun tarvitsemme käyttäjän napsauttamaan tietyn osan sivustosta ja keskittymään erityisesti vain tähän osaan siihen saakka, kunnes se osa tarjoaa.

Tätä voidaan käyttää useisiin eri asioihin, kuten käyttäjän sisäänkirjautumisiin, lomakkeen elementteihin, lataussivuihin tai se voi olla vain kuvan näyttäminen ja katsominen kyseisen kuvan kommentteihin. Facebook käyttää tätä auttaakseen sinua keskittymään vuorovaikutukseen, kun napsautat valokuvaa, mutta tietysti he voivat myös selata kuvia siellä. Voit napsauttaa niitä ja poistaa kaikki mahdollisuudet olla vuorovaikutuksessa pääsivun kanssa, kunnes napsautat modaalilaatikon ulkopuolelle tai palaa napsauttamalla "x".

Perusmodaaliteoria on kuitenkin erittäin mielenkiintoinen ja tukeutuu todellakin niihin periaatteisiin, joita me vain kosketti. Käy läpi käyttökotelon, jotta saat paremman käsityksen siitä, milloin ja miksi käyttää sitä.

Oletetaan, että käytät verkkosivustoa, jossa käyttäjät voivat rekisteröidä ja kirjautua niiden tallennustilaan, jonka he ovat vuokranneet sinulta (verkkotallennus). Sinä olet yritys on melko uskomattoman riippuvainen näistä käyttäjistä, joilla on suuri virtaus purkamisesta kotisivullasi kirjautumiseen sisään. Koska tämä on yksi tärkeimmistä asioista sivustossasi, haluat että käyttäjä tuntee olevansa pakotettu kirjautumaan sisään ja itse asiassa tekevät siitä uskomattoman helppoa.

Tästä johtuen etusivulla voi olla suuri merkintä -linkkiä tai varsinainen osio, jotta he voivat tehdä sen etusivulla, ehkä otsikossa. Vaikka ongelma näilläkin on, että jälkimmäisessä tapauksessa käyttäjä ei ole viitannut kirjautumiseen joka tapauksessa, ja entisessä käyttäjä ei ole pakko tehdä päätöksensä.

Nyt en suostu pakottamaan käyttäjiä tekemään mitään, mutta hellävaroen heittämistä hellästi on täysin hieno - ja tämä tarkoitti "pakotettua". Joten mitä voisit tehdä, on oltava sisäänkirjautumislinkki, joka vetää alas modaalisen ikkunan sisäänkirjautumislomakkeen kanssa. Näin he eivät koskaan tarvitse navigoida etusivulta ja sitten selata takaisin (esimerkkinä, jonka me totesimme hetken kuluttua), ja he ovat myös 100% tietoisia siitä, mitä heidän on tarkoitus tehdä modaalin sisällä.

Se on erittäin mukava tapa auttaa käyttäjiä ymmärtämään, mitä tapahtuu ja miksi se tapahtuu. Minun on sanottava, että olen käyttänyt sitä itse asiakkaille, ja kotisivulta saapumisen kirjautumisnopeus on kasvanut 35 prosentilla aikaisemmin, mitä olen nähnyt. Ja ne eivät todellakaan ole numeroita, jotka ravistavat kiinni; ne ovat todella arvokkaita ja selkeästi määriteltyjä tietoja siitä, kuinka yksinkertainen modaalinen ikkuna voi lisätä retention ja vähentää poistumisprosenttia.

Perusmoduuliprofiilin koodaus

Let's sukeltaa oikein joihinkin koodeihin, mutta nyt jätetään huomiotta, minkä tyyppinen modaalityyppi käytämme ja kaikki tekniset asiat, ja keskitymme vain ydinosaamiseen. HTML, CSS ja jQuery ovat mitä aiomme keskittyä nyt.

HTML-elementit

Tarvitsemme kaksi peruselementtiä, linkin avaamaan ikkunaa ja itse ikkunaa. Linkki näyttää tältä:

Seuraavaksi on lisättävä toinen ikkuna:

Huomaa, että div on kääritä molemmat ikkuna-divs id-modaalilla. Huomaa myös, että ensimmäisen modaaliverkon id vastaa ensimmäisen linkin href-arvoa ja että toisen modaaliväylän id vastaa toisen linkin href-arvoa; Näin linkit kohdistuvat oikeaan ikkunaan, kun pääsemme jQueryyn.

CSS-elementit

Meidän on muotoiltava modaalisten ikkunoiden kolme elementtiä, ja aloitamme yksinkertaisimmillaan:

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

Tämä koodi muotoilee divin luokalla "sisältö" (joka käärii kaikki sisältömme). Voit muokata sisältöäsi täällä, aivan kuten muualla sivulla. Suosittelisin ainakin vähän pehmusteita, koska typografiset säännöt sanovat, että kaiken sisällön on hengitettävä.

Seuraavaksi aion suunnitella sokea. "Kuka, pidä kiinni. Mikä on sokea? " Kuulin, että itket. Se on hyvin yksinkertainen: sokea on maskin vastakohta, sitä käytetään tyhjentämään loppu sivusta, kun ikkuna on näkyvissä. Ja ei, emme ole luoneet sitä merkinnöissämme, jQuery tekee sen meille. Nyt on vain tarve tarjota tyyli sille, että se kattaa koko ikkunan sisällön ja mikä tärkeintä, se sijaitsee yläpuolella z-akselin sisällön yläpuolella.

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

Lopuksi CSS: lle meidän on muotoiltava itse ikkunamme. Meidän on sijoitettava ikkuna sokeiden yläpuolelle. Sitten meidän on koottava se leveydellä ja korkeudella.

Seuraavaksi meidän on asetettava marginaalivahvistin puoleen leveydestä kerrottuna -1 (400/2 * -1 = -200) ja marginaalin yläpuolella puolet korkeudesta kerrottuna -1 (248/2 * -1 = -124). Myöhemmin aion käyttää jQueryä elementin sijoittamiseen yläosaan: 50% ja vasemmalle: 50% näiden negatiivisten marginaalien vuoksi ikkuna näytetään keskitetyksi selaimen mittasuhteista riippumatta, eikä meidän tarvitse yrittää ja aseta se selaimen koon mukaan.

Seuraavaksi meidän on asetettava vasen ja ylimmät ominaisuudet arvoon -1000px. Miksi haluaisimme tehdä sen? No, emme halua, että modaalinen ikkuna on näkyvissä, kunnes linkkiä napsautetaan. Toinen yleinen tekniikka on asettaa näyttö: ei mitään CSS: ssä, mutta äskettäin, että roskapostittajat ovat alkaneet käyttää sitä, ja hakukoneet voivat nyt olla musta hattutekniikka, etenkin jos sinulla on paljon avainsanoja modeemissasi. Sen sijaan, että se sijoitetaan hyvin näytön sijaan, saavutamme saman asian.

Lopuksi haluamme värittää ikkunan sopivan sivun värin, valkoinen tässä tapauksessa.

Ja vain hyvälle mittaukselle, miksi ei myöskään päästä CSS3: een ja heittää laatikko varjoon vain todella ponnahtaa ulos näytöstä - se ei ole kriittinen ja jätetään huomiotta, jos sitä ei tueta.

#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

Lopuksi lisäämme jonkin verran jQuerya modeemin valtaan. Se, mitä tarvitsemme, on kaapata napsautuksia linkkeihin; etsiä vastaava ikkuna ja hajota sitten se, jolloin ikkunan takana on sokea, joka estää klikkaukset toiseen sisältöön. ja lopuksi toiminto sulkea liikennemuoto, joka voidaan käynnistää sulkemispainikkeella tai napsauttamalla ikkunan ulkopuolelta.

Ensin meidän täytyy suorittaa komentosarja vain, kun asiakirja on valmis

$(document).ready(function(){

Seuraavaksi määritä muuttuja pitämään viittaus ikkunaan

var activeWindow;

Lisää sitten linkkikohtainen napsautustyökalu, joka estää oletuslinkin käyttäytymisen. tunnista vastaava ikkuna linkin href-attribuutista; määrittää sen aktiivisen ikkunan muuttujalle; siirrä ikkuna selaimen keskelle (muista CSS: n negatiiviset marginaalit, jossa he tekevät taikuuttaan, koska kaikki, mitä tarvitsemme, on 50% keskuksen saamiseksi) ja haalistuvat sen sisään; luo uusi div, jonka id "blind", haalistu ja liitä klikkauksenhallinta omaan, joka soittaa closeModal () -toimintoon.

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

Seuraavaksi meidän on lisättävä napsautustyökalu sulkupainikkeisiin soittamalla sama CloseModal () -toiminto kuin napsauttamalla sokea.

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

Viimeisenä mutta ei vähäisimpänä, meidän on luotava closeModal () -toiminto, joka palauttaa meidät alkuperäiseen tilaansa. Sen täytyy häivyttää ikkuna ja siirtää se takaisin lähtöasentoonsa, kun siirtyminen loppuu ja samaan aikaan haalistetaan sokea ja poistetaan se DOM: lta sen siirtymisen jälkeen.

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

Älä unohda sulkea $ (document) .ready handleria!

});

Niille, jotka haluavat oppia kopioimalla ja liittämään, tässä on koko käsikirjoitus:

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

Prosessin avain on erottaa modaaliväylä sen kolmesta osasta: datasta (HTML), tyylistä (CSS) ja toiminnallisuudesta (jQuery). On olemassa tuhansia muunnelmia, joita voit käyttää tämän ydintekniikan rakentamiseen. Olisimme kiinnostuneita lukemaan joitakin kokemuksiasi alla olevista huomautuksista.

Mitkä ovat parhaita esimerkkejä modaalisista ikkunoista, joita olet nähnyt? Mikä on sinun suosikki tekniikka niiden luomiseen? Kerro meille kommentit!