jb-modal

jb-modal

modal web component with features:

• Responsive, open as Bottom-sheet in mobile device.
• Framework free so you can use it anywhere.
• Customizable content & style.
• Pre-styled header and footer.
• 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

• github pages
• storybook

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>modal content</div>
</jb-modal>
<!-- OR -->
<jb-modal is-open="true">
    <div slot="header">modal header</div>
    <div slot="content">modal content</div>
    <div slot="footer">modal footer</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](https://javadbat.github.io/design-system/

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