Den dolda modala fönstertekniken är en bra lösning för att hantera gränssnittselement som inte är särskilt nödvändiga på sidan. Sociala nätverk kan använda modala fönster för privata meddelanden och formulär som endast används av medlemmar av webbplatsen. Detta gäller även för bloggar och tidskrifter som har en författarens inloggningssida separat från huvudwebbplatsen. Modala fönster är mycket enklare än att skapa nya fönster i JavaScript eftersom allt visas i samma fönster med hjälp av HTML-markup redan på sidan.
Jag vill visa hur vi kan bygga ett anpassat modal fönster baserat på jQuery plugin leanModal. Pluggen är helt öppen källkod och fri att använda enligt MIT generella licensen. Jag gillar det här pluginet mer än andra eftersom det bara ger oss "bare grundläggande" utan för mycket anpassning. Detta gör att rummet kan uppdatera modalfönstret via CSS och fortfarande använda några extra parametrar i jQuery.
Live Demo - Hämta källkod
Komma igång
Först har jag skapat två filer med namnet? Index.html? och? style.css? som håller hela demokoden. Inuti samma katalog har jag skapat en annan mapp med namnet / js / som innehåller två dokument. Först är det senaste mini jQuery-biblioteket och det andra är filen LeanModal plugin heter jquery.leanModal.min.js.
Nu kan det bli en överraskning att veta att vi inte behöver inkludera något standard CSS-stilark! Detta beror på att vårt leanModal-plugin bara ger väldigt grundläggande JS-funktioner, allt annat slimmas ner för att ge en blankt mall. Vi behöver dock kopiera över ett block av CSS som implementerar den mörka överlagringseffekten. Detta kopieras direkt från pluginwebbplatsen som jag lade till i mitt standardark.
Överlagringsområdet visas med 100% bredd och höjd överst på sidan. Då lägger jQuery till den riktade modala diven som visas ovanpå allt annat i HTML. Kännetecknande är min kroppsinnehåll ganska tom, det enda viktiga elementet är växelknappen för att visa detta modala fönster. Men låt oss ta en titt inuti HTML-formuläret inkapslad i #loginmodal div.
Anmärkning jag har med display: none; som en enda inline CSS-egenskap. Vi måste tvinga denna div att inte ha någon bildskärm så då kan leanModal () göra det blekna in i sidan och visa som ett blockelement. Jag använder en mycket enkel formulärvisning med liknande stilar som den här CSS-kassan. Den ljusblå designen fungerar bra i kontrast till den mörkare skuggöverläggningen, plus vi kan använda CSS3-övergångseffekter på inmatningsfälten.
Ett annat viktigt sidelement är Skicka-knappen. Eftersom det här formuläret inte skickar några data till servern, vill vi bara gömma det modala fönstret när användaren skickar in. Jag har lagt till klassen .hidemodal som vi kan installera i jQuery-metoden. Det kommer att stoppa standardformuläret och visar detta modala fönster som en rent estetisk effekt.
CSS Layout Styles
Mitt CSS-dokument innehåller alla typiska sidaåterställningar vi behöver, tillsammans med några av typografi och knappstilar. Det centrerade inloggningsmodellfönstret innehåller en ny knappstil som mimar den andra platta designen. Men tack och lov finns det inte så många unika CSS-egenskaper som kräver ytterligare en förklaring. Du borde kunna konstruera dina egna modala fönsterstilar utan mycket besvär.
Jag tror att de viktigaste elementen att känna igen är behållarna för överlagseffekten och modalfönstret. Jag har flyttat dessa ner till botten av stilarket, grupperat med alla andra modala fönsteregenskaper. Jag har begränsat modalfönstret till en bredd på 300 px eftersom det här exemplet bara kräver en blankett med 2 ingångar. Men kom ihåg att leanModal inte tvingar några standardstilar på ditt fönster, så designen är 100% i dina händer.
Var och en av textfälten har en övergångsanimeringseffekt på gränsen och rutaskuggorna. Textfärgen kommer också att blekna när du flikar mellan de två ingångarna. Jag valde ett ljusare blått färgschema och matchade knappeffekterna till inmatningsfälten. Det finns många CSS3 egenskaper tillsammans med deras leverantörs prefix, så den här formulären är inriktad mer mot nya renderingmotorer. Men det borde visas korrekt i alla större webbläsare.
Modal effekt i jQuery
Tyvärr är CSS3 inte på en punkt där vi kan lita på dess förmåga att dölja / visa olika fönster på en klickhändelse. Och det finns ingen garanti för att det någonsin kommer att bli en möjlighet. När det gäller modala fönster med en skuggbox-effekt blir det mycket lättare att hålla fast vid JavaScript. Lyckligtvis behöver leanModal-plugin bara en enda rad av JS att aktivera. Jag har lagt till följande kodblock strax innan min stängning märka.
Det första små kvarteret kommer att kolla när användaren trycker på? Logga in? och försöker skicka in formuläret. Vi använder JavaScript-nyckelord returnera falskt att stoppa evenemanget innan det ens triggar. Du kan läsa mer om denna metod på Stack Overflow. Nu är den sista raden av kod allt vi behöver för att få det modala fönstret att fungera.
Om vi inte behöver anpassa några parametrar så bara linjen $ (# Modaltrigger). LeanModal () ska fungera bra. Men för denna demo vill jag visa upp de 3 valfria variablerna du kan gå in i funktionen. Först lägger vi till offsetvärdet från toppen av fönstret för att placera denna nya modalbox. Då används ett värde från 0,0-1,0 för att markera bakgrundsdeacitetsnivån.
Och äntligen kan vi fästa en ny jQuery-väljare för nära knappen. Det här kan vara en klass eller ett ID, eller någon blandning inklusive HTML-attributväljare. För mitt exempel använder vi samma klass som jag lagt till på inloggningsknappen .hidemodal. På detta sätt ska det modala fönstret gömma varje gång du trycker på knappen Skicka.
För att få formuläret att fungera måste du ta bort den här klassen från knappen och ta bort JavaScript-koden före funktionen leanModal (). Då skickas formuläret korrekt och ska omdirigera användaren till en ny sida. Men du bör prova många olika idéer och se vilka typer av innehåll som kan fungera bra inom en modal display.
Live Demo - Hämta källkod
Slutgiltiga tankar
Modalfönstereffekten kan användas i mycket fler situationer än bara inloggningsformulär. Du måste tänka på olika UI-element på en webbsida och överväga vilka element som kan vara mer användbara i sitt eget fönster. Detta gäller speciella formulär eller längre detaljerat innehåll som inte kommer att erkännas av varje besökare.
Vänligen kolla in min live-demo och se hur vi kan implementera denna leanModal jQuery-effekt med standard HTML-block. Vem som helst med viss grundläggande förståelse för CSS borde inte ha något problem med att anpassa mina standardstilar. Det finns så många användningsområden för den här funktionaliteten att den bäst överlämnas till fantasin. Men jag hoppas att de här provkurskoderna kan ge en basmall för utvecklare som vill spara tid på sitt nästa projekt.