10 nemokamų „JavaScript“ modalinių langų įskiepių

Tu gali rasti daug grynų CSS modalų bet tai nesuteikia tos pačios kontrolės kaip „JavaScript“. Naudodami „JavaScript“ modalą galite pridėti pasirinktines animacijas, UI įvestį ir iš tiesų padidinti naudotojo patirtį.

Bet kodėl kažką suprojektuokite nuo nulio galite naudoti JS biblioteką? Aš surinkiau geriausi nemokami „JavaScript“ valdomi modaliniai scenarijai čia, kad galėtumėte susipažinti ir išskirti savo mėgstamus.

Visa tai yra visiškai nemokama ir atviro kodo, todėl galite redaguoti kodą ir atkurti juos, kad jie atitiktų jūsų svetainę.

1. Tingle

Vienas iš mano mėgstamiausių nemokamų modalinių scenarijų Tingle.js. Tai pastatytas ant vanilės „JavaScript“ be jokių priklausomybių, taigi jums nereikia jokių jQuery ar Zepto bibliotekų.

Be to, tai gana maža biblioteka, nors ji ir turi daug galimybių tinkinti. Galite keisti CSS perėjimus, „JavaScript“ modalines animacijas ir visą naudotojo patirtį naudodami kelis nustatymus.

Tingle.js yra sukurtas visiškai prieinamas ir reaguojantis, todėl jis veikia mobiliuosiuose įrenginiuose ir palaiko senesnes naršykles.

Jūs galite pamatyti visus GitHub dokumentus, kartu su nemokamu šaltiniu. Jie taip pat turi demo nuorodą, todėl galite patikrinkite Tingle veiksmą norėdami pamatyti, ar ji gali būti tinkama jūsų svetainėje.

2. Vanilės modalas

Štai modalas, kurį neseniai atradau daug paprastesnis nei dauguma. Vanilės modalas yra patikimas savo vardui su a švarus vanilės scenarijus sujungiant modalą CSS perėjimai.

Šis dalykas yra gana mažas ir labai lankstus pritaikytas CSS, kad būtų galima atnaujinti langus. Ji taip pat turi nemažai variantų, kuriuos galite pakeisti naudodami „JavaScript“, todėl puikiai tinka DOM funkcijoms arba netgi atgalinio ryšio funkcijoms.

Pažvelkite į demonstracinis puslapis norėdami pamatyti numatytąjį stilių. Tai tikrai paprastas dizainas, todėl jis bus reikalauti pritaikymų naudoti ją gamybos vietoje. Tačiau tai taip pat sumažina viso kodo reikalavimus, todėl tai yra viena iš mažiausių „JavaScript“ modalinių bibliotekų.

3. PlainModal

Jei norite tikrai paprastą scenarijų, labai rekomenduoju plainModal. tai yra pastatytas ant jQuery, bet tai vienas iš mažiausių modalinių scenarijų.

Ji nenaudokite jokių išorinių CSS ar vaizdo failų. Viskas, ko jums reikia, yra tik vienas JS scenarijus.

Kai „PlainModal“ scenarijus pridedamas prie jūsų puslapio, jūs tiesiog nukreipti modalinį mygtuką ir jūs gerai einate. Tai suteikia jums galimybę valdyti ekraną ir kiek norite pakeisti modalinę sąsają.

Be to, galite sukurti modalą su viena „JavaScript“ eilute laikytis minimalistinės šio įskiepio temos.

4. Modaal

Negalima paneigti prieinamumas internete yra didžiulis. Kiekvieno dizainerio tikslas turėtų būti a labiau įtraukią patirtį žmonėms visame pasaulyje įvairiuose įrenginiuose ir su galimais apribojimais.

Su Modaal, jūs gaunate tą puikią patirtį, kuri praeina WCAG 2.0 testas su patikimu AA prieinamumo įvertinimu. Pagrindiniame puslapyje kartu su kai kuriais kodų dokumentais galite pamatyti fantastinį pavyzdį.

Apskritai, aš rekomenduoju šį vanilės „JavaScript“ papildinį visiems, kurie tikrai rūpinasi prieinamumu. AA reitingas gali būti reikalingas kai kuriuose interneto projektuose, todėl „Modaal“ yra tikrai patogus scenarijus, skirtas išsaugoti žymes.

5. „Scotch JS Modal“

„Scotch.io“ kūrimo komanda skelbia koderių vadovus ir vadovus. Jų darbas yra neįtikėtinas ir jis iš tikrųjų pasirodo šis „JavaScript“ modalinis scenarijus, patalpintas „Scotch GitHub“.

Modalą sukūrė Ken Wheeler ir šis scenarijus turi visą pamoką jei norite sužinoti, kaip jis veikia. Tačiau daugelis kūrėjų turi turėti pakankamai kodo, nes tai yra labai lengvas ir lengva nustatyti. Nėra priklausomybių ir netgi pavyzdinio demonstravimo „CodePen“.

6. Bootbox.js

Greičiausias būdas pradėti naują interneto projektą yra per „Bootstrap“. Tai galinga priekinio vaizdo sistema, skatinanti kūrėjus sukurti savo priedus bibliotekai.

Vienas iš tokių pavyzdžių yra Bootbox.js, maža „JavaScript“ biblioteka, sukurta tik modaliniams langams Bootstrap. Tai iš tikrųjų veikia dialogo lange jei vartotojas gali spustelėti OK arba atšaukti, remiantis jūsų prašymu.

Tipiniai „JavaScript“ dialogai yra baisūs, kaip ir perspėjimo laukeliai. „Bootbox“ scenarijus siūlo a patikima alternatyva visiems, dirbantiems BS3 / BS4 ekosistemoje.

Vėlgi, tai yra visiškai nemokama ir atviro kodo, kartu su ilgas dokumentacijos puslapis greitai ir greitai.

7. iziModal.js

Jei tu reikia šiek tiek labiau pritaikyto sprendimo patikrinkite iziModal.js. Šis įrankis yra visiškai reaguoja ir skirtos puikiai dirbti visose šiuolaikinėse naršyklėse.

Aš dar turiu rasti kitą modalinį scenarijų, kuris siūlo tokį estetinį dizainą. Jis išeina iš vartų su puiki UI, kuri gali susilieti su praktiškai bet kuria svetaine. Tačiau galite taip pat atkurkite dizainą kad atitiktų jūsų poreikius.

Tiesiog atkreipkite dėmesį į šį papildinį veikia su jQuery, taigi tai vienas iš nedaugelio čia turi priklausomybę. Bet jei norite iziModal stilių, tai maža kaina, mokama už tokius aptakus langus.

8. jQuery Modal

The jQuery Modal įskiepis galbūt paprasčiausias modalinis scenarijus jQuery, kurį kada nors rasite.

Jis gali būti užprogramuotas automatiškai susieti su tam tikrais HTML elementais remiantis įvairiais atributais. Taip pat palaiko sparčiuosius klavišus pvz., ESC lango uždarymui.

Iš viso šis papildinys priemonės yra mažesnės nei 1 KB ir tai veikia visose galimose naršyklėse, kurias galite įsivaizduoti. jQuery kūrėjai turėtų išsaugoti šį papildinį, kad būtų galima greitai pasiekti paprastą modalinį scenarijų be papildomų frills.

9. PicoModal

Grįžtant link vanilės „JavaScript“, turime PicoModal biblioteka. Tai tikriausiai yra vienas iš mažiausių scenarijų, kuriuos rasite ir yra sukurtas paleiskite puikiai ant vanilės „JavaScript“ pagrindo.

Tai palaiko visas modernias naršykles, įskaitant „Android“ ir „Mobile Safari“ naršykles iOS. Jis netgi palaiko senesnes IE naršykles, kurios yra sukurtos iš IE7!

„PicoModal“ kūrėjas sukūrė mažą JSfiddle scenarijų parodyti, kaip ji veikia. Tai labai mažas pavyzdys ir tai nėra susieta su paspaudimo įvykiu ar nieko kita, bet tai nėra sunku scenarijus keliuose perjungimo mygtukuose tinkamai paleisti šį modalinį langą.

10. Avgrund

Avgrund tikriausiai yra vienas iš unikaliausių šio sąrašo modalų. Jis naudoja a pasirinktinio puslapio blukimo efektas, kartu su mažėjančia animacija parodyti modalinį režimą.

Ne visi įvertins šią animaciją, todėl negaliu pasakyti, kad šis scenarijus atitiktų kiekvieną svetainę. Bet tai yra grynas vanilės modalas ir tai labai lengva nustatyti, su tik CSS ir „JavaScript“ file.

Pažvelkite į demonstracinis puslapis pamatyti, kaip jis veikia. Tai tikrai turi unikalų stilių ir yra privaloma paimti dėmesį su pasirinktomis animacijomis, kurios tik veikia.

Galutiniai žodžiai

Nesvarbu, ko ieškote, statysiu, kad šiame sąraše yra kažkas, kas atitinka jūsų poreikius. Bet, jei vis dar nesate patenkintas naršykite GitHub susijusiems modaliniams scenarijus ir pažiūrėkite, ką dar galite rasti.