Share
Många processer på webben kräver i dag användarnas fullständiga samtycke för att kunna slutföras. Till exempel kan användare behöva ta bort ett konto, ändra sitt användarnamn eller bekräfta en monetär transaktion.
Ett vanligt UX-tillvägagångssätt i sådana fall är att visa en dialogruta, vanligtvis med två knappar; en för avbrytande och en för att fortsätta med åtgärden. Vi har lita på JavaScript-bibliotek för att göra detta i flera år, men i den här handledningen kommer vi att göra saker som är naturliga med experimenten element.
Stödjande webbläsare (Chrome 37+ och Opera 27+) kommer att göra Det är värt att notera De De I de flesta fall är det troligt att vi skulle använda bekvämligheten av Dialogrutan bär webbläsarens standardstil som enkelt kan överdrivas som de flesta andra element. Du kan till exempel göra dialogrutan gränsare tunnare, göra hörnen rundade och lägga till droppskugga. Dessutom, när Det är vanligt att utforma bakgrunden med en liten opacitet mörk färg-klicka på den röda knappen för att se den i åtgärd: Att anpassa dialogrutans stilar borde vara enkelt, men vad sägs om att lägga till CSS-övergång? Vad sägs om att vi gradvis avslöjar dialogrutan, med hjälp av en skalningseffekt, mer eller mindre hur OS X gör det? Till att börja med ska vi skala ner dialogrutan med 90%, ange övergången och lägga den ur sikte. Nu definierar vi en klassväljare som ska skala dialogrutan upp till sin avsedda storlek och göra den synlig. Vårt knep är att vi kommer att "hålla" dialogrutan i liten skala i några millisekunder innan vi lägger till klassen Låt oss inte glömma att ta bort den här klassen och radera tidenOut när dialogrutan är stängd. Vi är redo! Du kan ge det en tur i följande demo: De Fram till dess kan du använda polyfil från Google Chrome för att simulera det i icke-stödjande webbläsare. är ett HTML5-element (5,1 för att vara exakt). Det är klassificerat som en "sektionsrot", som liknar , , och den -båda metoderna är giltiga.
element som är doldt som standard, gör det bara synligt på begäran med JavaScript show() eller showModal (), och den stänga() metod för att dölja det igen. Vanligtvis skulle vi köra den här metoden inom en klick händelse, som så:var $ accountDelete = $ ('# delete-account'), $ accountDeleteDialog = $ ('# bekräfta-radera'); $ accountDelete.on ('click', function () $ accountDeleteDialog [0] .showModal ();); $ ('# cancel'). på ('klicka', funktion () $ accountDeleteDialog [0] .close ();); De
show() v. showModal () Metodshow() och showModal () uppför sig annorlunda.show() Metoden avslöjar elementet i enlighet med sin position i DOM-flödet. Om du lagt till det omedelbart innan du stänger koden, kan den visas längst ner på webbsidan. Vi skulle behöva lägga till anpassade stilar för att justera positionen, till exempel om vi vill placera den centrerad på sidan. Dessa stilar brukar användas z-index att stapla elementet ovanpå de andra elementen, placera fastighet satt till absolut, tillsammans med vänster och topp.showModal () Metoden, å andra sidan, kommer att visa elementet som en modal. Den visas som standard på mitten av sidan, och den ligger i det övre lagret, som helskärms API som förhindrar störningar av z-index, relativ position och överflöde av moderelementet.showModal () istället för show() metod.Anpassa stilar
elementet visas som en modal (med hjälp av showModal () metod) har vi ett extra pseudo-element, ::bakgrund, till vårt förfogande. De ::bakgrund elementet ligger strax under dialogrutan, som täcker hela visningsporten och resten av elementen nedan.Lägga till känsla med övergångar
Steg 1
dialog visibility: hidden; transformera: skala (0,1); övergång: transformera 200ms;
Steg 2
dialog.dialog-skala synlighet: synlig; transformera: skala (1);
Steg 3
dialog-skala. För att uppnå detta använder vi JavaScript setTimeout () metod för att lägga till klassen:varövergång $ accountDelete.on ('klick', funktion () $ accountDeleteDialog [0] .showModal (); transition = setTimeout (funktion () $ accountDeleteDialog.addClass ('dialogskala');, 0,5);) ; Steg 4
$ ('# cancel'). på ('klicka', funktion () $ accountDeleteDialog [0] .close (); $ accountDeleteDialog.removeClass ("dialogskala"); clearTimeout (övergång);); Avslutar
är verkligen Praktiskt, men fortfarande väldigt dåligt när det gäller webbläsarsupport. Om och när alla större webbläsare har implementerat det, kommer vi att vara mindre beroende av bibliotek, vår innehållsstruktur kommer att vara mer semantisk, korrekt tillgänglig för hjälpteknik och vi får ett vanligt sätt att leverera modala dialoger. 
http://caniuse.com/#feat=dialogYtterligare resurser
Accentsconagua