Kóði

Tækni til að búa til Modal Windows

Modal gluggar eru oftast lýst sem nokkuð sem tekur eftir athygli notandans og leyfir þeim ekki að fara aftur í fyrra ástand fyrr en þau hafa samskipti við hlutinn sem um ræðir.

Nú er það svolítið ímyndað og ég held að það sé betra beint með nokkrum dæmum um vefsíður sem nota tækni mjög vel. Einn þeirra er Byggðu það með mér hver er það mjög vel. Ef þú ert að fara yfir á síðuna sína og smellt á Skráðu þig, muntu sjá mjög bókstaflega dæmi um hvenær formakassi virkar bara.

Oftast þegar unnið er með mótum eru þau notaðir til að hreinsa upp notendaviðmót og reyna að auka reynslu notandans - en það er mikilvægt að muna að stundum geri þau nákvæmlega andstæða. Íhuga pirrandi vefsíður með of mörgum JavaScript sprettiglugga eða ruslpóstssíðum sem staðfesta að þú viljir fara frá síðunni. Það er fáránlegt, og síður sem gera þetta eru algerlega engu að síður, svo vertu viss um að þú veist hvernig á að nota modal viðræður áður en þú ferð áfram með framkvæmdina.

Til að gefa þér betra fordæmi um hvernig á að gera þau rétt, munum við tala um kenningu - þá munum við komast í dæmi til að sýna þér hvernig á að framkvæma þær í móttækilegri hönnun. Svo skulum hoppa beint inn í nokkrar kenningar.

Modal kenning

Grundvallar kenningin um notendaviðmótið fyrir módel getur verið frekar samblandað við aðrar UI setningar sem við munum aðeins snerta samband við hér. Í grundvallaratriðum eru það sem við erum að horfa á nauðsyn þess að við höfum þar sem við þurfum notanda til að smella á tiltekna hluta vefsvæðisins og að einblína sérstaklega á aðeins þann hluta þar til verkefni er lokið.

Nú gæti þetta verið notað fyrir marga mismunandi hluti, svo sem innskráningar notenda, formþætti, niðurhalssíður eða það gæti verið að einfaldlega birta mynd og skoða athugasemdir þessarar myndar. Facebook notar þetta til að hjálpa þér að einblína á samskipti þegar þú smellir á mynd, en auðvitað leyfa þeir þér að hjóla í gegnum myndirnar þar líka. Þú getur smellt á þá og þá tekur það í burtu alla möguleika til að hafa samskipti við aðalhliðina þar til þú smellir annaðhvort utan um mátakassann eða smellir á "x" til að fara aftur.

Grundvallar hugmyndafræði er þó mjög áhugavert og byggir virkilega á þau meginreglur sem við snertum bara. Skulum fara í gegnum notkunartilboð svo þú getir fengið betri hugmynd um hvenær og hvers vegna að nota einn.

Segjum að þú keyrir vefsíðu þar sem notendur geta skráð sig og skráð sig inn í geymslu sína sem þeir hafa leigt frá þér (á netinu geymsla). Jæja, þú sem fyrirtæki er ansi ótrúlega áreiðanlegur á þeim notendum sem hafa mikla flæði frá lendingu á heimasíðunni þinni til að skrá þig inn. Þar sem það er ein mikilvægasta hluturinn sem þú býður upp á á síðuna þína, vilt þú að notandinn sé þvingaður til að skrá þig inn og í raun gera það ótrúlega auðvelt fyrir þá að gera það.

Vegna þess að þú gætir haft stóran skilaboð í tengil á heimasíðuna þína eða raunverulegur hluti fyrir þá að gera það á heimasíðunni, ef til vill í hausnum. Þó að vandamálið með þeim sé að í síðara tilvikinu er notandinn ekki bent á innskráningu í engu að síður, og í fyrra er notandi ekki neyddur til að taka ákvörðun.

Nú skil ég ekki neitt að neyða neytendur til að gera neitt en varlega nudge þá er það fullkomlega fínt - og það er það sem ég átti við með "knúinn". Svo það sem þú gætir gert er að hafa tengingartengil sem dregur niður raðglugga með innskráningarblaðinu þarna. Þannig þurfa þeir aldrei að sigla frá heimasíðunni og fara síðan aftur (í gegnum dæmið sem við höfum sagt um stund) og þeir eru líka 100% meðvitaðir um hvað þeir eiga að gera inni í líkaninu.

Það er mjög góð leið til að fara að hjálpa notendum að skilja hvað er að gerast og hvers vegna það er að gerast. Ég verð að segja að ég hef notað það sjálfur fyrir viðskiptavini og varðveislahlutfallið frá heimasíðunni til að skrá þig inn hefur aukist um 35% í fortíðinni sem ég hef séð. Og þeir eru vissulega ekki tölur til að hrista staf á; Þeir eru mjög mikilvægar og skýrt skilgreindar mælikvarðar um hversu mikið einfalt breytingargluggi getur aukið varðveislu og minnkað hopphraða.

Kóðun grunn grindar glugga

Láttu kafa inn í nokkra kóða en nú er ekki séð fyrir hvaða tegund af gerðartegundum sem við erum að fara að nota og allar tæknilegar upplýsingar, og við skulum bara einbeita okkur að grunnatriðum. HTML, CSS og jQuery eru það sem við ætlum að leggja áherslu á núna.

HTML Elements

Það eru tveir grunnþættir sem við þurfum, hlekkur til að opna gluggann og gluggann sjálfan. Tengillinn lítur svona út:

Næst þurfum við að bæta við annarri glugga:

Takið eftir að báðir gluggahlutarnir eru pakkaðir af div með kennimarkinu. Takið einnig eftir að auðkenni fyrsta fyrsta gluggans passar við href fyrsta tengilinn og að kennimerki annarrar hliðar gluggans samsvari href annarrar hlekkarinnar; það er hvernig tenglarnir miða á rétta gluggann þegar við komum til jQuery.

CSS þættirnir

Við þurfum að stilla þrjá þætti af gluggum okkar, við munum byrja með einföldustu: 

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

Þessi kóði stíll div með innihaldi bekkjarins (það er eitt umbúðir allt efni okkar). Þú getur stíll efni þitt hér, rétt eins og þú myndir annars staðar á síðunni. Ég myndi mæla með að minnsta kosti litlu padding, því typographic reglur fyrirmæli um að allt efni þarf að anda.

Næstum ætlum við að stilla blinda. "Hverjir, halda áfram. Hvað er blindur? " Ég heyri þig gráta. Það er mjög einfalt: blindur er hið gagnstæða af grímu, við munum nota það til að tæma afganginn af síðunni okkar meðan glugginn er sýnilegur. Og nei, við höfum ekki búið til það í markinu okkar, jQuery mun gera það fyrir okkur. Fyrir nú þurfum við bara að bjóða upp á stíl fyrir það svo að það nær yfir allt innihald gluggans og síðast en ekki síst situr það yfir restina af innihaldi á z-ásnum. 

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

Að lokum fyrir CSS, þurfum við að stilla gluggann sjálfan. Við þurfum að setja gluggann fyrir ofan blindann. Þá þurfum við að stærð það með breidd og hæð eiginleika.

Næstum þurfum við að stilla framlegðina til vinstri að helmingi breiddarinnar margfaldað með -1 (400/2 * -1 = -200) og framlegðin í toppi með helmingi hæðinni margfölduð með -1 (248/2 * -1 = -124). Seinna ætlum við að nota jQuery til að staðsetja þáttinn efst: 50% og vinstri: 50%, vegna þessara neikvæða framlegð virðist glugginn vera miðjaður óháð stærð vafrans og við verðum ekki að reyna staðsetja það miðað við stærð vafrans.

Næst þurfum við að setja vinstri og efstu eiginleika til -1000px. Af hverju viljum við gera það? Jæja, við viljum ekki að glugginn sé sýnilegur fyrr en smellt er á tengilinn. Annar algeng aðferð er að stilla skjá: Enginn í CSS heldur nýlega sem hefur byrjað að vera misnotuð af spammers og það má nú merkt með leitarvélum sem svörtu hattaraðferð, sérstaklega ef þú ert með mikið af leitarorðum í líkaninu þínu. Með því að setja það í stað vel á skjánum í staðinn náum við það sama.

Að lokum viljum við lita gluggann á viðeigandi síðu lit, hvítt í þessu tilfelli.

Og bara til góðs, hvers vegna ekki líka að dýfa í CSS3 og kasta á kassaskugga bara til að virkilega gera það skjóta út úr skjánum - það er ekki verkefni-gagnrýninn og verður hunsuð ef ekki stutt. 

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

The jQuery

Að lokum erum við að fara að bæta við nokkrum jQuery til að knýja modalinn. Það sem við þurfum að gera er að fanga smelli á tenglana; Finndu samsvarandi gluggann og þá hverfa það inn, skapa blinda á bak við gluggann sem kemur í veg fyrir smelli á annað efni; og að lokum, aðgerð til að loka líkaninu sem hægt er að kveikja á loka hnappinum okkar eða með því að smella utan við gluggann.

Fyrst þurfum við að keyra handritið aðeins þegar skjalið er tilbúið 

$(document).ready(function(){

Næst skaltu skilgreina breytu til að halda tilvísun í gluggann 

var activeWindow;

Bættu síðan við smellahönd við tengla, þessi aðgerð kemur í veg fyrir sjálfgefið tengsl hegðun; auðkenna samsvarandi glugga frá href eiginleiki tengilins; úthlutaðu það til virkaWindow breytu; hreyfðu gluggann í miðju vafrans (mundu neikvæða framlegðina í CSS? Þetta er þar sem þeir vinna galdur þeirra vegna þess að allt sem við þurfum að setja er 50% til að fá miðstöðina) og hverfa það í; Búðu til nýja div með kennimyndinni 'blind', hverfa það og hengja smelltistjórann sem kallar á closeModal () virknina. 

$('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æstum við þurfum að bæta við smellihönd við loka hnappana til að hringja í sama closeModal () virknina sem smellt er á blinda. 

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

Síðast en ekki síst þurfum við að búa til closeModal () virknina sem mun skila okkur í upphafsstaðinn okkar. Það þarf að hverfa út úr glugganum og færa það aftur til upphafsstöðu þegar umbreytingin lýkur, og samtímis hverfa blindu og fjarlægja það úr DOM þegar umskipti hennar lýkur. 

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

Ekki gleyma að loka $ (skjalinu) .ready handler! 

});

Fyrir þá sem kjósa að læra með því að afrita og líma, hér er fullt handrit: 

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

Lykillinn að þessu ferli er að aðgreina gluggann í þremur hlutum: gögn (HTML), stíl (CSS) og virkni (jQuery). Það eru þúsundir afbrigði sem þú getur notað til að byggja á þessari algerlega tækni og við viljum gjarnan lesa um nokkrar af reynslu þinni í athugasemdunum hér að neðan.

Hverjir eru bestu dæmin um modal gluggakista sem þú hefur séð? Hver er uppáhalds tækni þín til að búa til þau? Láttu okkur vita í athugasemdum!

css kóðun jquery html Modal Windows