Denna handledning är ännu ett roligt CSS-projekt som hjälper dig att bygga något som du kanske trodde bara var möjligt med JavaScript. Vi ska skapa ett modalfönster som kan visas och döljas med ett klick som drivs av en CSS-kryssruta.
För att söta upp affären kommer vi också att använda en mediafråga för att se till att modalskärmen anpassar sig till mindre skärmstorlekar. Låt oss hoppa in och se hur allt fungerar!
Live-demo: Klicka här för att starta.
Komma igång
För att börja, behöver vi lite generiskt innehåll som alltid är synligt på sidan. Vi behöver inte något fint, bara lite text för nu. Jag använde en grundläggande rubrik och en paragraf:
Hittills så bra, nu låt oss flytta på knappen som kommer att växla vårt modala fönster av och på.
Byt HTML
I den här artikeln röstade kommenterare för att se fler handledning om hur man åsidosätter kryssrutor för att skapa rena CSS-klickevenemang, så det är precis vad vi ska göra här!
Hur det här fungerar är ganska enkelt. Vi börjar med en inmatning med en typ av? Kryssrutan? med en grundläggande textikett kopplad som så:
Som du kan se, är "etiketten för? avsnittet matchar ID för ingången. Det här är viktigt! Den snygga funktionaliteten här är det, även om vi gömmer den faktiska kryssrutan, vilket är exakt vad vi ska göra, kan etiketten fungera som ett klickbart objekt som växlar kassans kontrollerade skick.
Modal HTML
Nu är det dags att slutföra vår HTML genom att lägga till i den faktiska modala fönsterkoden. Efter kryssrutan, skapa en div med en klass av? Modal ?. Inne i denna div kan du placera allt du vill. Jag gick med en annan enkel rubrik och punkt setup.
Med det är vi alla färdiga med vår HTML. Om vi öppnar vår sida i en webbläsare finns det verkligen inte så mycket att se. Men alla de viktigaste elementen vi behöver är på plats och redo att bli stylad.
Body & Container CSS
Nu när vi har vår HTML klar, låt oss hoppa över till vår CSS och börja göra denna sak ser lite bättre ut. Det första jag ska göra är att kasta i en repeterande träbakgrundsbild för att göra vår sida lite mer attraktiv.
Som du kan se kommer denna bild med tillstånd av SubtlePatterns. Därefter ska vi stilla vår behållare. Börja först med lite marginal, vaddering och storlek, och fortsätt sedan med texten.
Som du kan se använde vi CSS stenografi för att deklarera typsnittstypen för vår rubrik och punkt. Detta är ett kortfattat sätt att förklara din vikt, storlek, linjehöjd och fontfamilj. Observera att min linjehöjd är inställd på 1,5 utan någon angiven enhetstyp. Detta är ett bra litet knep som låter dig förklara din linjens höjd som ett förhållande till teckensnittstorlek.
Kryssrutan CSS
Nu när vi har utformat vårt generella sidinnehåll är det dags att attackera etiketten och kryssrutan. Det första steget här är att utforma etiketten så att den ser ut som en knapp och mindre som en enkel textdel.
Om vi ändrar etiketten till ett blocknivåelement, kan vi deklarera en höjd, bredd och bakgrundsfärg, vilket hjälper oss att uppnå den knappvisning som vi ska gå för. Observera också att jag ställer in en svängstil för att ändra färg och markör så att den beter sig mer som en länk.
Med vår etikett ser vi hur vi vill, kan vi nu gräva den aktuella kryssrutan. För att göra detta, helt enkelt ändra positionen till absolut och trycka den av duken.
Med den här koden ser vår sida ganska bra ut. Här är en titt:
Modal CSS
Det statiska sidinnehållet är markerat och stylat. Vår nästa uppgift är att få den sista biten av HTML faktiskt att se ut som en modalbox. Vi gör detta med en ganska stor bit av CSS. Låt oss ta en titt på det och sedan går jag igenom det.
Det händer mycket här, så låt oss bryta upp det. Det första målet var att centrera rutan på sidan. Det här är ganska knepigt med tanke på att vi använder hela visningsporten och därför inte känner till våra föräldrars dimensioner.Genom att använda absolut positionering, auto marginaler och återställande positioneringsvärden, centrerar vi emellertid effektivt vårt objekt på skärmen.
Observera att jag också ställer in z-indexet till ett negativt värde. Detta beror på att modalfönstret, även när det är dolt, kan blockera andra objekt på sidan. Du kommer inte att se det, men det kan eventuellt förhindra ett klick eller svävar, så vi kasta det till botten av stapeln.
Resten av koden är visuell känsla. Vi gav det verk: en något transparent bakgrund, boxskugga, övergång och rundade hörn. Observera att jag har opaciteten satt till 0 som standard. Detta beror på att vi bara vill att det modala fönstret ska dyka upp när vi klickar på knappen.
Modaltyp
Vi har vår lådformat, men glöm inte typen inuti. Vi använder stilar som liknar men lite annorlunda än den andra texten på sidan. Kom ihåg att ställa både h2 och stycket.
Kontrollerad stat
Få det att fungera!
Modalboxen ser bra ut nu, men du skulle aldrig veta för att den är gömd. Låt oss göra det så att det visas när etiketten / knappen klickas.
Här riktade vi inmatningen med? Växeln? klass och en kontrollerad sate, så letade efter en angränsande syskon med en klass av? modal ?. Därefter tar vi opaciteten och z-indexet i det modala fönstret upp till en så att den blir fullt synlig.
Adaptiv CSS
Vår modalbox är nästan färdig! Allt fungerar bra och snyggt. Jag märkte emellertid att sakerna inte ser riktigt ut när visningsstorleken är reducerad. En liten bit av adaptiv styling här går långt, så låt oss sätta in ansträngningen.
Som du kan se ställde jag helt enkelt upp en enskild mediafråga på 767px och minskade storleken på några saker: boxens dimensioner, h2 och stycket. Nu har modalboxen två olika tillstånd som gör det bra på små eller stora skärmar.
Se den i aktion
Med det är vi alla färdiga! För att testa sidan för dig själv, besök demo nedan.
demo: Klicka här för att starta.
Vad tror du?
Där har du det, ett rent CSS-modalt fönster som anpassar sig till små och stora skärmstorlekar. Som alltid finns det några semantiska problem när han kapar en kryssruta för något så här, men det kände mig inte som om det här var ett jobb för: målet, så det verkade som vägen att gå.
Lämna en kommentar nedan och låt mig veta vad du tycker. Vad skulle du ändra? Hur skulle du göra det bättre?