Jb-modal NPM | npm.io

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 |