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.

Lory Carousel Slider Funksjoner CSS Animasjon og Touch Support

Ut av alle karusellplugger på nettet må jeg tippe hatten min til Lory . Det er et så enkelt konsept, men det er lett en av de mest kraftige skyvekontrollene på nettet.Den minifiserte versjonen utgjør ca. 7 KB, som ikke er liten, men det er absolutt ikke dårlig for en berøringsaktivert karusellregulator .Du kan

(Tekniske og design tips)

The Undeniable Paradoxes of Techie Culture

Kompleksiteten i det Silicon Valley er ikke sluttet å vokse, i takt med forenkling av verktøy og den neste boblen som noen forventer vil briste i nær fremtid . Vi fløyter mens vi tinker bort på neste treningsapplikasjon eller bærbar teknologi, gjør vårt ytterste for å forbli naivt uvitende om den tøffe grunnlaget for vår techie-kultur.De er ryst

(Tekniske og design tips)