Jb-modal NPM | npm.io

jb-modal

modal web component with features:

framework free so you can use it anywhere
customizable content & style
support typescript
auto close on background click
you can add custom route history in browser
back button handler to just close the modal instead of real back
keep modal open in case of page refresh (by just provide an id)

Demo & Sample
in github: https://javadbat.github.io/jb-modal/

using with JS frameworks

to use this component in react see jb-modal/react;

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;

keep modal state

if you want your modal to keep open when user refresh the page or you want capture back button in mobile when modal is open you just need to provide an id attribute.

<jb-modal is-open="true" id="Something">
</jb-modal>

events

//when web-component load and you can access modal logic
document.querySelector('jb-modal').addEventListener("load",(e)=>{/*your function*/});
// when modal load and initiated completely 
document.querySelector('jb-modal').addEventListener("init",(e)=>{/*your function*/});
// when page refresh and modal open by default because of url 
document.querySelector('jb-modal').addEventListener("urlOpen",(e)=>{/*your function*/});
// when modal closed
document.querySelector('jb-modal').addEventListener("close",(e)=>{
    // could be "BACKGROUND_CLICK"  "HISTORY_BACK_EVENT" "CLOSE_BUTTON_CLICK"
    const closeType = e.detail.eventType 
    /*your function*/
});

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 |