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