10 gratis JavaScript-invoegtoepassingen voor vensters

Je kunt vinden veel pure CSS-modals maar deze bieden niet dezelfde controle als JavaScript. Met een JavaScript-modal kunt u aangepaste animaties, UI-ingangen toevoegen en de gebruikerservaring echt verbeteren.

Maar waarom zou je iets helemaal opnieuw ontwerpen? je kunt een JS-bibliotheek gebruiken? Ik heb de beste gratis door JavaScript aangedreven modale scripts Hier kunt u uw favorieten bekijken en eruit halen.

Dit zijn allemaal volledig gratis en open-source, zodat je de code kunt bewerken en opnieuw kunt stijlen zodat deze op jouw site past.

1. Tingle

Een van mijn favoriete gratis modale scripts is Tingle.js. Haar gebaseerd op vanille JavaScript zonder afhankelijkheden, dus je hebt geen jQuery- of Zepto-bibliotheken nodig.

Plus, het is een vrij kleine bibliotheek, hoewel dat wel het geval is veel opties voor maatwerk. Je kunt de CSS-overgangen, de JavaScript-modal-animaties en de hele gebruikerservaring met slechts een paar instellingen wijzigen.

Tingle.js is ontworpen om te zijn volledig toegankelijk en responsief, dus het werkt op mobiele apparaten en ondersteunt ook oudere browsers.

Je kan zien alle documentatie op GitHub, samen met de gratis broncode. Ze hebben ook een demolink, dus je kunt het bekijk Tingle in actie om te zien of het op uw website zou kunnen passen.

2. Vanilla Modal

Hier is een modaal die ik onlangs heb gevonden en dat is het ook een stuk eenvoudiger dan de meeste. Vanilla Modal staat trouw aan zijn naam met een puur vanilla-schrift de modal aansturen, samen met CSS-overgangen.

Dit ding is vrij klein en super flexibel, met aangepaste CSS om de vensters te restylen. Het heeft ook een flink aantal opties die je kunt veranderen met JavaScript, waardoor het perfect is voor het uitvoeren van DOM-functies of zelfs terugroepfuncties.

Neem een ​​kijkje op de demopagina om de standaardstijl te zien. Het is echt een basisontwerp, dus dat zal het wel zijn vereisen aanpassingen om het te gebruiken op een productiesite. Maar dit vermindert ook de totale codevereisten, dus dat is het een van de slankste JavaScript-modal-bibliotheken.

3. plainModal

Als je een heel eenvoudig script wilt, raad ik je ten zeerste aan plainModal. Het is gebouwd op jQuery, maar het is een van de kleinste modale scripts die beschikbaar is.

Het doet geen externe CSS- of afbeeldingsbestanden gebruiken. Slechts één JS-script is alles wat je nodig hebt.

Zodra het plainModal-script aan uw pagina is toegevoegd, hoeft u alleen maar richten op de modale knop en je bent klaar om te gaan. Hiermee krijgt u controle over het display en hoeveel u de modale interface wilt wijzigen.

Plus, dat kan stel de modal in met één regel JavaScript houden met het minimalistische thema van deze plug-in.

4. Modaal

Er valt niet te ontkennen toegankelijkheid is enorm op internet. Het doel van elke ontwerper moet een zijn meer inclusieve ervaring voor mensen over de hele wereld op verschillende apparaten en met mogelijke beperkingen.

Met modaal, je krijgt die perfecte ervaring welke slaagt voor de WCAG 2.0-test met een degelijke AA-toegankelijkheidsclassificatie. Je kunt een fantastisch voorbeeld op de hoofdpagina zien, samen met wat codedocumentatie.

Over het algemeen raad ik deze vanille JavaScript plug-in aan voor iedereen die echt om toegankelijkheid geeft. De AA-classificatie kan voor sommige webprojecten vereist zijn, dus Modaal is een echt handig script om een ​​bladwijzer te maken.

5. Scotch JS Modal

Het ontwikkelteam van Scotch.io publiceert zelfstudies en handleidingen voor coders. Hun werk is ongelooflijk en het laat zich echt zien dit JavaScript modale script, gehost op de Scotch GitHub.

De modal is ontwikkeld door Ken Wheeler en zelfs dit script heeft een volledige tutorial als je wilt leren hoe het werkt. De gratis code zou echter voldoende moeten zijn voor de meeste ontwikkelaars, omdat dit het geval is super lichtgewicht en eenvoudig in te stellen. Geen afhankelijkheden en zelfs een voorbeelddemo op CodePen.

6. Bootbox.js

De snelste manier om start een nieuw webproject is via Bootstrap. Het is een krachtig frontend raamwerk dat ontwikkelaars aanmoedigt creëer hun eigen add-ons naar de bibliotheek.

Eén zo'n voorbeeld is Bootbox.js, een kleine JavaScript-bibliotheek, uitsluitend ontworpen voor modale vensters in Bootstrap. Het eigenlijk werkt op dialoogvensters waar de gebruiker op OK kan klikken of annuleren, op basis van uw verzoek.

Typische JavaScript-dialogen zijn vreselijk, net als waarschuwingsvakken. Het Bootbox-script biedt een solide alternatief voor iedereen die in het BS3 / BS4-ecosysteem werkt.

Nogmaals, het is volledig gratis en open-source, samen met een lange documentatiepagina om je snel op te starten en te laten werken.

7. iziModal.js

als jij een oplossing nodig die iets meer op maat is gemaakt uitchecken iziModal.js. Deze tool is volledig responsief en ontworpen om werk in alle moderne browsers perfect.

Ik moet nog een ander modaal script vinden dat zo'n esthetisch ontwerp biedt. Het komt uit de poort met een prachtige gebruikersinterface die kan worden geïntegreerd in praktisch elke website. Dat kan je echter wel ook restylen het ontwerp om aan uw behoeften te voldoen.

Let op deze plug-in werkt op jQuery, dus het is hier een van de weinigen heeft een afhankelijkheid. Maar als je de iziModal-stijlen wilt, is het een kleine prijs om voor zulke slanke popover-vensters te betalen.

8. jQuery Modal

De jQuery Modal-plug-in is misschien het eenvoudigste modale script op jQuery die je ooit zult vinden.

Het kan worden geprogrammeerd om automatisch binden met bepaalde HTML-elementen gebaseerd op verschillende attributen. Het ook ondersteunt sneltoetsen zoals ESC om het raam te sluiten.

In totaal is deze plug-in meet minder dan 1 KB en het werkt in elke mogelijke browser die u maar kunt bedenken. jQuery-ontwikkelaars moeten deze plug-in behouden voor snelle toegang tot een eenvoudig modaal script zonder de extra franje.

9. PicoModal

Teruggaan naar vanilla JavaScript, we hebben de PicoModal-bibliotheek. Dit is waarschijnlijk een van de kleinste scripts die je zult vinden en het is ontworpen om ren perfect op een vanille JavaScript-backbone.

Het ondersteunt alle moderne browsers, inclusief mobiele browsers voor Android en Mobile Safari voor iOS. Het ondersteunt zelfs oudere IE-browsers, die dateren uit IE7!

De ontwikkelaar van PicoModal creëerde een klein JSfiddle-script om aan te tonen hoe het werkt. Dit is een heel klein voorbeeld en dat is het niet gekoppeld aan een klikgebeurtenis of iets anders, maar het is niet moeilijk om script in een paar schakelknoppen om dit modale venster correct uit te voeren.

10. Avgrund

Avgrund is waarschijnlijk een van de meest unieke modals in deze lijst. Het gebruikt een aangepast paginavervagingseffect, samen met een krimpende animatie om het modale recht in zicht te brengen.

Niet iedereen zal deze animatie waarderen, dus ik kan niet zeggen dat dit script op elke website zou passen. Maar het is een pure vanille modal en het is super eenvoudig om in te stellen, met alleen een CSS en een JavaScript-bestande.

Kijk eens naar de demopagina om te zien hoe het werkt. Het heeft zeker een unieke stijl en is dat ook gebonden om de aandacht te trekken met de aangepaste animaties die gewoon werken.

Laatste woorden

Wat u ook zoekt, ik wed dat er iets in deze lijst staat dat aan uw behoeften voldoet. Maar als je nog steeds niet tevreden bent bladeren door GitHub voor gerelateerde modale scripts en zie wat je nog meer kunt vinden.