This is the usage guide for BSDialog5, version 0.2.0.013.
Show(options)
Creates a Modal on the page (and loads the body from a URL, if applicable). An existing box will be reused if the ID already exists.
Options
{
ID: "modalL1",
Title: "Modal Title",
Message: "Hello Momo!",
URL: null,
Size: "md",
Colour: "secondary"
}
Parameters
ID | string | A unique identifier for the modal, so you can refer to multiple modals. |
Title | string | Label at the top of the modal |
Message | string | Text content of the modal |
URL | URL/string | URL to load into the modal body. Use null if loading isn’t needed. |
Size | string | Size of the modal (sm, md, lg, xl). Default is medium (md). |
Colour | CSS/string | CSS style of the close button at the lower-right. Default is “secondary”. |
Examples
BSDialog5.Show({
ID: "modalL1",
Title: "Modal Title",
Message: "Hello Momo!",
URL: null,
Size: "md",
Colour: "secondary"
});
Prompt(options)
Opens a Prompt modal that returns a value from buttons. The default is “Yes”, “No” and “Cancel” buttons. Closing the modal will return an empty string.
Options
{
Title: "Modal Title",
Message: "Are you sure want to wait for a response?",
Size: "md",
Buttons: [
{ Label: "Yes", Value: "Yes", Colour: "primary" },
{ Label: "No", Value: "No", Colour: "secondary" },
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
]
}
Parameters
Title | string | Label at the top of the modal |
Message | string | Text content of the modal |
Size | string | Size of the modal (sm, md, lg, xl). Default is medium (md). |
Buttons | Array of buttons | An array of buttons with individual labels, return values and button styles. Default is Yes/No/Cancel. |
Examples
let response = await BSDialog5.Prompt({
Title: "Modal Title",
Message: "Are you sure want to wait for a response?",
Size: "md",
Buttons: [
{ Label: "Yes", Value: "Yes", Colour: "primary" },
{ Label: "No", Value: "No", Colour: "secondary" },
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
]
});
alert(response);
Update(options)
Change a modal’s title, message body, size and/or footer after it is open.
Options
{
ID: "modalR1",
Title: "Modal Changed Title",
Body: "Hello momo again!",
BodyURL: null,
Size: "lg",
Footer: null
}
Parameters
ID | string | A unique identifier for the modal |
Title | string | Label at the top of the modal |
Body | string | Text content of the modal |
BodyURL | URL/string | URL to load into the modal body. Use null if loading isn’t needed. |
Size | string | Size of the modal (sm, md, lg, xl). Default is medium (md). |
Footer | string | Content of the modal footer. |
Examples
BSDialog5.Update({
ID: "modalR1",
Title: "Modal Changed Title",
Body: "Hello momo again!",
BodyURL: null,
Size: "lg",
Footer: null
});
Find(id)
Find Modal by its identifier
Parameters
id | string | A unique identifier for the modal, so you can refer to multiple modals. |
Examples
BSDialog5.Find("exampleModal1");
Returns
Title | array of elements | An array of Modal title elements, for the first modal only. |
Body | array of elements | An array of Modal body elements, for the first modal only. |
Footer | array of elements | An array of Modal footer elements, for the first modal only. |
Close | array of elements | An array of close elements, for the first modal only. |
Modal | array of elements | An array of Modal elements |
{
Title: [],
Body: [],
Footer: [],
Close: [],
Modal: []
}
Close(id)
Close the Modal by the box identifier.
Parameters
id | string | Unique identifier for the modal |
Examples
BSDialog5.Close("exampleModal1");
Clear()
Close all Modals on the page.
Examples
BSDialog5.Clear();