<head>
<script src="https://cdn.jsdelivr.net/gh/Shlok-Jain/ModalJS@latest/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shlok-Jain/ModalJS@latest/index.css">
</head>
This is a basic example for showing modal
const modal = new ModalJS({ //initialising modal
title: 'Title of modal',
body: 'Your main content of the modal goes here',
theme: 'dark', //light or dark
custom_buttons: [
{
text: 'SUBMIT',
theme: 'green', //green, blue, red or yellow
onclick: () => { console.log('Thank You for submitting') },
},
],
close_btn_text: "CLOSE",
draggable: true,
close_on_out_click: true,
hide_close_btn:false,
onclose:()=>{console.log('closed')}
})
modal.show() //trigger this when you want to show modal
API Reference: | Parameters | Type | Value | Description |
|---|---|---|---|
| title | String |
- |
The title that will show up on the header of modal |
| body | String |
- |
pass the body as a string. If it contains HTML, then wrap it in inverted commas. |
| theme | String | 'light' or 'dark' | There are two themes inbuilt, which are light and dark. |
| custom_buttons | Array |
- |
Pass an array of the desired number of buttons. See below for more context about this property. |
| close_btn_text | String |
- |
Text that is to be displayed on close button of modal. The default value is “CLOSE”. |
| draggable | Bollean | true / false | make modal draggable by setting it true. By default it is not. |
| close_on_out_click | Bollean | true / false | Set it true if you want to close the modal when clicked outside it. By default it is false. |
| hide_close_btn | Bollean | true / false | Set it true if you don't want to show the "CLOSE" button. By default it is false |
| onclose | Arrow Function |
- |
This function will run when modal is closed |
InBuilt Methods
| show() | Use this when you want to display the modal |
|---|---|
| hide() | Use this when you want to hide the modal |
custom_buttons
This includes an array of desired number of buttons. The children of this array is a JSON itself (one for each button). It takes following params.
| Name | Type | Description |
|---|---|---|
| text | String | Text to be displayed on button |
| theme | String |
Four themes are available for buttons. namely green, blue, red or yellow |
| onclick | Arrow Function | This is the onclick listener for your button |
If you want to format the button afterwards (for example, you want to show a spinner in it when loading), then you can do it by modal.buttons array. This will return an array of all buttons in the order you mentioned in custom_butons.