Bouw Modals met Pure CSS met CSS Modal

Bij webdesign moet je een goede contentorganisatie hebben. Dit helpt de gebruikers leesbaardere en functionele informatie te geven. U kunt dit doen door een nette en opgeruimde lay-out op de website te maken. Om de inhoud te ordenen, zijn er veel interface-elementen en -structuren die u kunt gebruiken, en modale dialoog is er een van.

Als u een modale dialoog met jQuery of andere plug-ins hebt gemaakt, hebben we goed nieuws voor u. Met de CSS Modal- bibliotheek heb je alleen pure CSS nodig.

Hans Christian Reinl, degene die CSS Modal heeft ontwikkeld, heeft een groot aantal voordelen inbegrepen. Enkele van de voordelen zijn dat het als een SASS-plug-in kan worden gebruikt, dat er crossbrowserondersteuning is, het is geoptimaliseerd voor mobiel, het kan worden ingevoegd met media (beeld, video en geluid), en het is klein en snel.

Bijna alle moderne browsers ondersteunen CSS Modal . Het is getest op Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 en Android. Hoewel het nog steeds kleine problemen heeft voor Android 2.3 (scrollen is het grootste probleem, op het moment van schrijven), werkt het nog steeds goed.

HTML-markup

CSS Modal bestaat uit drie delen: header, content en footer . In de header kun je de titel voor de modal zetten. De inhoud is voor het weergeven van de belangrijke informatie die u wilt markeren. Dit onderdeel ondersteunt tekst, afbeeldingen en ingesloten code. Wat betreft het footer, kunt u hier aanvullende informatie toevoegen, zoals een knop Sluiten, een knop voor een nieuw venster openen, enz.

Als u een modaal dialoogvenster wilt maken, moet u de sectietag en een aantal vooraf gedefinieerde data-attributes, klasse en ID gebruiken. Binnen het .modal-inner moet een element zijn opgenomen dat is ingepakt met .modal-inner class. Dit is de standaardmarkering:

De id in de sectietag wordt gebruikt om de modaal vanuit een andere functie aan te roepen, bijvoorbeeld via een koppeling, en de waarde kan naar wens worden gewijzigd. a tag op de code, zal worden gebruikt als de modale sluitknop. Attribuut van de href moet worden overgelaten zoals hierboven is weergegeven, omdat hierdoor de pagina niet meer naar boven hoeft te scrollen wanneer erop wordt geklikt.

De header en footer zijn optionele delen die u mogelijk wel of niet kunt opnemen. Maar houd er rekening mee dat als u een koptekst gebruikt, u een unieke ID-naam moet toevoegen en het aria-labelledby kenmerk moet wijzigen in dezelfde waarde.

Vergeet niet om de CSS Modal- bibliotheek, die u van de GitHub-pagina kunt downloaden, aan uw project toe te voegen.

 ..  .. 

Extra Javascript

Er zijn nog steeds enkele problemen wanneer u CSS Modal gebruikt met pure CSS, zoals:

• Problemen met IE 8-compatibiliteit
• Toetsenbord Escape-knop om te verlaten
• Scrollen achtergrondpreventie
• Focuseffect naar modaal en terug naar pagina na sluiting

Om deze problemen op te lossen, is javascript hier nog steeds nodig. Gelukkig heeft CSS Modal je een lichte javascript-broncode ter beschikking gesteld voor jouw gemak. Voeg deze code toe vóór uw afsluitende body tag.

Laatste gedachte

Het creëren van modal met pure CSS heeft nog steeds een aantal nadelen, maar het kan een alternatieve tool worden om je website verder te verrijken. En je wilt waarschijnlijk iets anders proberen. Met een beetje creativiteit zou je een aantal ontzagwekkende modals kunnen maken. Probeer het eens.

Software voor webontwerpers op budget - Ultieme gids

Webontwerp kan kostbaar zijn voor ontwerpers; niet alleen het proces is tijdrovend, maar ook met zware investeringen. Ontwerpers met een beperkt budget worden vaak met hetzelfde dilemma getroffen - krachtige machine en mindere software, of genoegen nemen met een gemiddelde machine, zodat u meer ontwerpgerelateerde software kunt kopen, maar in de handel lijdt u voor het achterblijvende epische systeem

(Technische en ontwerptips)

Freebie: 10 hoogwaardige zomerbeletteringen

Samen met Freepik brengen we dit Hongkiat exclusieve freebie-aanbod van 10 Summer Letterings uit voor een ontwerp dat geschikt is voor het strand en perfect is voor het paradijs. De beletteringen zijn ook beschikbaar in cursief, in hoofdletters en in kleine letters en in cijfers.Bekijk deze freebies en volg de instructies om deze bestanden te bemachtigen

(Technische en ontwerptips)