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: https://javadbat.github.io/jb-modal/
install
npm i jb-modal
usage
<jb-modal is-open="true">
<div slot="content">modal content</div>
</jb-modal>
auto close on background click
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
|