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

Web Design Trends: Hvordan bestemme hva som fungerer

Designere elsker å klage på "overfladiske" designtrender som de ikke føler har noen makt eller bidrar til noe som betyr noe for bransjen. Men er de rett?I dag skal vi snakke om designtrender og nye fenomener som får mange designere pumpet opp, men det kan også trekke ire av andre som tror designindustrien går ned i rørene.Er des

(Tekniske og design tips)

Administrere Pinterest Pins And Boards For Business

Pinterest har nylig rullet ut nye funksjoner som endrer måten ting gjør på bildedelssiden. Dette gjør det til en plattform å vurdere i mange sosiale medier markedsførere strategi samt plattform for å utnytte for bedrifter. Noen av disse funksjonene som Promoted Pins er spesielt tatt vare på små og mellomstore bedrifter .Hvis du

(Tekniske og design tips)