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 |