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

Google vil begynne å straffe mobile nettsteder med irriterende popup-vinduer

Annonseringsinterstitialer kan være irriterende når de bruker hele siden, begrenser tilgangen til nettstedets innhold, og kommer med en liten boks som skal lukke den, men bruker vanligvis brukeren ved et uhell å utløse annonsen i stedet. Heldigvis har Google nevnt at det vil begynne å straffe mobile nettsteder som implementerer slike interstitialer som en del av sin pivot mot mobilmarkedet.Fra

(Tekniske og design tips)

15 spill som vil vinne hjertet ditt med sin fantastiske grafikk

For noen av oss er et spill med grønt grafikk, men kjempeflott eller gameplay bra i bøkene våre. For andre er grafikk et viktig aspekt av spill, selv om det bare er et mobilappspill. I denne listen ser jeg på håndplukkede spill som har kunstneriske visuals, interessant spill eller fascinerende historier som vil inspirere kunstneriske mennesker til å skape flere kunstverk.Noen

(Tekniske og design tips)