nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Gemakkelijk Modal Window maken met HTML5 Dialog

Het modale venster is een van de meest gebruikte gebruikersinterfaces die we op websites kunnen vinden. Het wordt vaak gebruikt om een ​​inschrijvingsformulier bij te houden, formulieren te uploaden (zoals in WordPress), meldingen weer te geven en andere manieren om de aandacht van een bezoeker op iets belangrijks te vestigen.

Al die tijd gebruiken we jQuery plug-in zoals jQuery UI Dialog, Twitter Bootstrap Modal of Popeasy om er een te maken. Maar HTML5 heeft een nieuwe tag met de naam

waarmee we op een veel eenvoudigere manier een native modaal venster kunnen maken.

Dialog Element gebruiken

De ... gebruiken

element is hetzelfde als hoe we andere HTML-elementen gebruiken. We voegen gewoon de inhoud toe die we willen weergeven in het dialoogvenster, zoals zo.

Hallo Wereld!

Lorem ipsum dolor sit amet, consectetur adipiserende elit. Earum, inventore!

Maar merk op dat wanneer u het bekijkt in Chrome (wat momenteel de enige browser is die deze tag ondersteunt) het dialoogvenster verborgen is. En gezien de bovenstaande HTML-structuur, zien we alleen de knop Show Dialog. Om het dialoogvenster te tonen kunnen we de JavaScript .show() gebruiken en .close() gebruiken om het te verbergen.

 (functie () {var dialog = document.getElementById ('venster'); document.getElementById ('show'). onclick = function () {dialog.show ();}; document.getElementById ('exit'). onclick = function () {dialog.close ();};}) (); 

Klik op de knop "Dialoog weergeven" en het dialoogvenster verschijnt in het midden van het browservenster.

We kunnen het dialoogvenster aanpassen via CSS. Standaard bedekt het dialoogvenster de volledige horizontale ruimte in de browser. Dus laten we de breedte specificeren, zoals zo.

 dialoogvenster {width: 500px; } 

Voorts

element wordt geleverd met een nieuw pseudo-element genaamd ::backdrop . Het wordt gebruikt om die typische schemerige achtergrond die we vaak achter een dialoogvenster vinden te stylen. Hiermee kunnen bezoekers zich meer richten op de dialoog en alle andere dingen erachter verbergen. Het lijkt op dit moment niet te werken, maar zal in de toekomst worden ondersteund.

Conclusie

HTML is de afgelopen jaren zo geëvolueerd. Het is niet langer alleen voor het bouwen van een webpagina, we kunnen nu zelfs een interactieve UI bouwen met nieuwe HTML-elementen zoals

samen met JavaScript API. Let op: dit element is experimenteel, het is nog niet klaar voor productie en het werkt alleen in Chrome met de Experimentele functies ingeschakeld op de pagina chrome://flags .

  • Demo bekijken
  • Download de bron

77 Catchy en creatieve leuzen

77 Catchy en creatieve leuzen

Een slogan is een advertentietag of zin die adverteerders maken om het belang en de kerngedachte van hun product of dienst mondeling uit te drukken. Over het algemeen is het een thema van een campagne die meestal een echte rol speelt in het leven van mensen. Het heeft de mogelijkheid om mensen tijd en aandacht te lenen door consumenten centraal te stellen in de oplossing

(Technische en ontwerptips)

Hoe u uw Android-smartphone vanuit het bureaublad kunt beheren

Hoe u uw Android-smartphone vanuit het bureaublad kunt beheren

Hoe geavanceerd je smartphone ook is, multi-tasken is een levende nachtmerrie. We worden beperkt door het kleine scherm op een smartphone of tablet en de nadruk erop dat we bij elke weergave maar één app kunnen gebruiken.Het is waarschijnlijk gemakkelijker om een ​​massa media te beheren, zoals onze foto's, video's en muziek op de desktop . Dit

(Technische en ontwerptips)