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.

Zelfstudie Fotomanipulatie: 75 stappen om een ​​auto te laten vliegen

In deze zelfstudie gebruiken we Adobe Photoshop om een ​​abstracte "Flying Car Illustation" te maken. Dit is wat we zullen maken met deze Photoshop-zelfstudie.We beginnen met een selectieoefening met de oude auto, daarna voegen we vliegende rotsen toe met toren en draden. Vervolgens voegen we drie vogels toe, waaronder een die midden in beweging is. We

(Technische en ontwerptips)

10 handige Pinterest-hulpmiddelen voor bedrijven

Tools voor beheer van sociale media zijn hemels verzonden, vooral als u meerdere sociale-mediaaccounts en -platforms beheert. Hetzelfde geldt voor Pinterest. Als u Pinterest voor uw bedrijf gebruikt, moet u niet alleen te maken krijgen met posting naar de op afbeeldingen gebaseerde site, maar ook jongleren met cross-posting naar andere sociale media, contact maken met volgers en uw berichten bijhouden om onder andere te noemen

(Technische en ontwerptips)