Bygg moduler ved hjelp av ren CSS med CSS Modal

I webdesign må du ha en god innholdsorganisasjon. Dette bidrar til å gi brukerne mer lesbar og funksjonell informasjon. Du kan gjøre dette ved å bygge en fin og ryddig layout på nettsiden. For å organisere innholdet, er det mange grensesnittelementer og strukturer du kan bruke, og modal dialog er en av dem.

Hvis du har opprettet modal dialog med jQuery eller andre plugins, har vi noen gode nyheter for deg. Med CSS Modal- biblioteket trenger du bare ren CSS.

Hans Christian Reinl, den som utviklet CSS Modal, har medført mange fordeler som følger med. Noen fordeler er at den kan brukes som et SASS-plugin, det er kryssleserstøtte, det er optimalisert for mobil, det kan settes inn med media (bilde, video og lyd), og det er lite og fort.

Nesten alle moderne nettlesere støtter CSS Modal . Det har blitt testet på Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 og Android. Selv om det fortsatt har små problemer for Android 2.3 (rulling er det største problemet, når det skrives), fungerer det fortsatt bra.

HTML Markup

CSS Modal har tre deler å jobbe med: header, innhold og bunntekst . header er hvor du kan sette tittelen for modal. Innholdet er for å vise viktig informasjon du vil markere. Denne delen støtter tekst, bilder og innebygd kode. Når det gjelder footer, kan du legge til tilleggsinformasjon her, for eksempel en lukkerknapp, en åpen ny vindueknapp osv.

Hvis du vil opprette en modal dialog, bør du bruke section og noen forhåndsdefinerte data-attributes, klasse og id. Inne i section tagg, et element innpakket med. .modal-inner klasse må inkluderes. Her er det grunnleggende oppslaget:

id i section tagget brukes til å ringe modal fra en annen funksjon, for eksempel ved hjelp av en lenke, og verdien kan endres etter behov. a kode på koden, vil bli brukt som den modale lukkeknappen. Egenskapen til href bør overlates som vist ovenfor, da det vil stoppe siden fra å rulle til toppen når den klikkes.

header og footer er valgfrie deler, som du kanskje (eller kanskje ikke) inneholder. Men vær så snill å huske at hvis du bruker en overskrift, må du legge til et unikt ID-navn og endre aria-labelledby attributtet til samme verdi.

Ikke glem å inkludere CSS Modal- biblioteket, som du kan laste ned fra GitHub-siden til prosjektet ditt.

 ..  .. 

Ekstra Javascript

Det er fortsatt noen problemer når du bruker CSS Modal med rent CSS, for eksempel:

• Problemer med IE 8-kompatibilitet
• Tastatur Escape-knapp for å avslutte
• Ruller bakgrunnsforebygging
• Fokusere effekten på modal og tilbake til siden etter å lukke den

Så for å fikse disse problemene, er javascript fortsatt nødvendig her. Heldigvis har CSS Modal gitt deg en lett javascript kildekode for din bekvemmelighet. Inkluder denne koden før lukkemerken din.

Endelig tanke

Å opprette modal med ren CSS har fortsatt noen ulemper, men det kan bli et alternativt verktøy for å berike nettstedet ditt ytterligere. Og du vil sikkert prøve noe litt annerledes. Med litt kreativitet kan du gjøre noen ganske flotte modeller. Prøv det.

10 Mobile Apps for å finne kommende hendelser og nye steder av interesse

Etter en stund blir du lei av å ha sittende fast foran enhetene dine, og du finner behov for å koble til igjen med venner og gå og gjøre noe sammen. Før du kaster den mobile enheten bort, kan du prøve ut disse 10 appene for å hjelpe deg med å finne et arrangement du kan chill out med venner først. Disse a

(Tekniske og design tips)

9 leksjoner jeg lærte fra å bygge min første app

Sommeren 2014 bestemte jeg meg for å bygge et spill. Jeg elsker historie og kunnskap, så jeg bestemte meg for at spillet skulle være en trivia. Jeg begynte å bygge et nettsted ved hjelp av PHP og MySQL (som jeg lærte bare for dette formålet) å lagre fakta, spørsmål og annen info.Ved slutten av sommeren hadde jeg begynt å bygge nettstedet. Å måtte

(Tekniske og design tips)