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.

Android Studio 3.0 - Alles wat u moet weten

Als Android-ontwikkelaar verwacht ik snel nieuwe en innovatieve functies van Google om ontwikkelaars zoals ik te helpen eenvoudig apps te maken en testen en Android Studio 3.0 is dat niet. Voor het eerst aangekondigd in de Google I / O 2017 biedt Android 3.0 ondersteuning voor Kotlin samen met een aantal andere functies

(Technische en ontwerptips)

20 Web Design Industry-voorwaarden voor de Clueless-klant

In de webontwerpindustrie gebruiken we veel insider-termen . Dit maakt het niet alleen moeilijk om aan de slag te gaan met nieuwkomers, met name klanten die niet betrokken zijn bij de ontwerpindustrie, maar hun betekenis goed communiceren, kan soms een hele uitdaging zijn.In deze woordenlijst hebben we 20 vaak gebruikte webontwerptermen verzameld en een korte uitleg aan elk ervan toegevoegd, zodat iedereen er snel naar kan kijken in geval van enige onzekerheid

(Technische en ontwerptips)