Opprette Modal Window enkelt med HTML5 Dialog

Hei Verden! 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Earum, inventore!
Exit 
 Vis dialog 

Men vær oppmerksom på at når du ser det i Chrome (som er den eneste nettleseren som støtter denne taggen for øyeblikket), er dialogvinduet gjemt. Og gitt HTML-strukturen ovenfor, ser vi bare Vis dialogboksen. For å vise dialogvinduet kan vi bruke JavaScript API .show(), og bruk .close() å skjule det.

 (funksjon () {var dialog = document.getElementById ('window'); document.getElementById ('show'). onclick = funksjon () {dialog.show ();}; document.getElementById ('exit'). = funksjon () {dialog.close ();};}) (); 

Klikk på "Show Dialog" -knappen, og dialogvinduet vises i midten av nettleservinduet.

Vi kan tilpasse dialogvinduet gjennom CSS. Som standard dekker dialogvinduet hele horisontal plass i nettleseren. Så, la oss spesifisere bredden, slik som det.

 dialog {bredde: 500px; } 

Dessuten,

elementet kommer med et nytt pseudo-element som kalles ::backdrop . Det er vant til å stile den typiske svake bakgrunnen som vi vanligvis finner bak et dialogvindu. Det lar besøkende fokusere mer på dialogboksen og gjemmer alt annet bak det. Det ser ikke ut til å fungere i øyeblikket, men vil bli støttet i fremtiden.

Konklusjon

HTML har utviklet seg så mye de siste par årene. Det er ikke bare bare å bygge webside, vi kan til og med nå bygge interaktive brukergrensesnitt med nye HTML-elementer som

sammen med JavaScript API. Vær oppmerksom på at dette elementet er eksperimentelt, det er ikke klar for produksjon ennå, og det fungerer bare i Chrome med eksperimentelle funksjoner aktivert fra chrome://flags .

• Se demo
• Last ned kilde

Freebie: Piktogrammer av hverdagen

Piktogrammer er ikoner som skildrer noe under solen i ingen sammenheng - noe som gjør den til den perfekte typen ikon for enhver form for bruk . Det vanligste piktogrammet vi alle sikkert vet ved hjerte er toalettskiltet for menn og kvinner. Men dagens freebieutgivelse designet av Freepik for Hongkiat-lesere, strekker seg til situasjoner i et mye bredere utvalg.

(Tekniske og design tips)

21 mest besøkte fonter nettsted

I designbransjen er det alltid et gullhopp for en god skrift som kan legge til virkninger for designene. Som designer er jeg også der ute og leter etter frie, gratis skrifttyper for å legge til i min skriftsamling. Og for det snur jeg mot noen av de beste nettstedene for gratis skrifttyper .Så i dette innlegget, deler jeg gjennom min erfaring, 21 gratis fonter nettsteder som er mest besøkte og foretrukket av et flertall av profesjonelle designere .Hvi

(Tekniske og design tips)