Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-modal
modal web compoent
https://github.com/javadbat/jb-modal
Last synced: 7 days ago
JSON representation
modal web compoent
- Host: GitHub
- URL: https://github.com/javadbat/jb-modal
- Owner: javadbat
- License: mit
- Created: 2022-09-13T07:17:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T14:01:09.000Z (about 1 month ago)
- Last Synced: 2024-11-27T19:55:05.341Z (25 days ago)
- Language: TypeScript
- Size: 24.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jb-modal
modal web component with features:
- customizable content
- support typescript
- auto close on background click
- you can add custom route history in browser so back button can close modal and refresh (when modal is open) is open modal again
Demo & Sample
in github:
## install
```cmd
npm i jb-modal
```
## usage
```html
modal content
```
## auto close on background click
```js
document.querySelector('jb-modal').config.autoCloseOnBackgroundClick = true;
```
## customize modal look
you can customize modal look by following css properties
| css variable name | description |
| ------------- | ------------- |
| --jb-modal-bg-color | modal content background color default is black `#fff` |
| --jb-modal-back-bg-color | modal back background color |
| --jb-modal-border-radius | modal border-radius default `24px` |
| --jb-modal-border-radius-mobile | modal border-radius on mobile default is `24px 24px 0 0` |