Top 21 JavaScript Modal Projects
-
fancyBox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
There are a ton of plugins for this, but I've always just found it easier to go straight to the source https://fancyapps.com/fancybox/3/
-
Im using react-modal which is pretty great. Is it possible to dynamically size it (perhaps with css media tag). For example,
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
-
I found out that something like this is possible in iOS 14 but I couldn't found a library that would support that except for react-native-modal-datetime-picker. But still I don't know how to use this in Android.
-
-
react-portal
🎯 React component for transportation of modals, lightboxes, loading bars... to document.body or else.
-
Project mention: Best notification libraries and plugins for Javascript and jQuery | dev.to | 2022-05-08
SourceCode | Demo
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
On that note, TIL about screen reader issues related to dialogs in general, including this built-in. Seems like the question is primarily around how to update the focus target from the "invoking element" to the dialog's content in a reader-friendly way. There's a linked post from the MDN docs with more detail https://www.scottohara.me/blog/2019/03/05/open-dialog.html#i.... They actually still recommend a custom implementation that's considered more robust when used with screen readers: https://github.com/KittyGiraudel/a11y-dialog. I'm glad there's a callout on the MDN docs as I would have assumed this dialog element is screen reader clean. Focus management is always a tough thing regardless.
-
jBox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
-
It would be useful to create a function that would take a dialog component and control its rendering in the template. The function would return an object containing the state of the dialog and methods, so that it could be possible to work with it like with promises. For example, this plugin vue-modal-dialogs implements this functionality. Unfortunately, it has not been updated for a long time and does not support Vue 3.
-
-
🦞 Modali
A delightful modal dialog component for React, built from the ground up to support React Hooks.
-
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
-
-
-
-
-
bootstrap-show-modal
A Bootstrap / jQuery plugin wrapper, to create modals dynamically in JavaScript
-
bs5-lightbox
A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components
Project mention: How 2 Quickly Create a Lightbox Photo Gallery in Your Bootstrap 5 Site | dev.to | 2022-05-09Here's what I found that works like a charm. BS5-Lightbox is written by Travis A. Wagner, and solves the lightbox Bootstrap riddle very succinctly.
-
bigger-picture
High performance lightbox gallery for images, video, audio, iframes, html. Zoomable, responsive, accessible, lightweight.
Project mention: Would love some feedback on a lightbox / modal library I'm making | reddit.com/r/sveltejs | 2022-04-11Github: https://github.com/henrygd/bigger-picture
-
react-dynamic-sheet
A react component for an animated mobile-first dynamic action sheet (modal/sheet)
JavaScript Modal related posts
- Best notification libraries and plugins for Javascript and jQuery
- react-modal Dynamic Sizing
- Demystifying package.json
- Smalltalk/Electron Issue
- How do I selectively install/delete folders/files from my repo when I install it?
- While building a webpart, I am struggling to create a form that covers the entire page area
- For SPO custom webpart, is it possible to create a div/form that extends through other webpart area or cover the page?
Index
What are some of the best open-source Modal projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | fancyBox | 7,187 |
| 2 | react-modal | 6,930 |
| 3 | body-scroll-lock | 3,610 |
| 4 | react-native-modal-datetime-picker | 2,531 |
| 5 | baguetteBox.js | 2,284 |
| 6 | react-portal | 2,046 |
| 7 | AlertifyJS | 1,947 |
| 8 | a11y-dialog | 1,941 |
| 9 | jBox | 1,328 |
| 10 | vue-modal-dialogs | 283 |
| 11 | photoviewer | 256 |
| 12 | 🦞 Modali | 205 |
| 13 | react-gallery-carousel | 179 |
| 14 | react-layer-stack | 152 |
| 15 | reoverlay | 117 |
| 16 | smalltalk | 80 |
| 17 | react-apple-signin-auth | 58 |
| 18 | bootstrap-show-modal | 40 |
| 19 | bs5-lightbox | 29 |
| 20 | bigger-picture | 25 |
| 21 | react-dynamic-sheet | 15 |
Are you hiring? Post a new remote job listing for free.
