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

Other Related Docs:

• see jb-modal/react; if you want to use this component in react

• see All JB Design system Component List for more components

• use Contribution Guide if you want to contribute in this component.