193 lines
4.3 KiB
Markdown
193 lines
4.3 KiB
Markdown
# Usage: v0.2.0.013
|
|
|
|
This is the usage guide for [BSDialog5](/bootstrap-js-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**
|
|
|
|
```javascript
|
|
{
|
|
ID: "modalL1",
|
|
Title: "Modal Title",
|
|
Message: "Hello Momo!",
|
|
URL: null,
|
|
Size: "md",
|
|
Colour: "secondary"
|
|
}
|
|
```
|
|
|
|
**Parameters**
|
|
|
|
| Parameter | Type | Description |
|
|
|---|---|---|
|
|
| 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**
|
|
|
|
```javascript
|
|
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**
|
|
|
|
```javascript
|
|
{
|
|
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**
|
|
|
|
| Parameter | Type | Description |
|
|
|---|---|---|
|
|
| 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**
|
|
|
|
```javascript
|
|
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**
|
|
|
|
```javascript
|
|
{
|
|
ID: "modalR1",
|
|
Title: "Modal Changed Title",
|
|
Body: "Hello momo again!",
|
|
BodyURL: null,
|
|
Size: "lg",
|
|
Footer: null
|
|
}
|
|
```
|
|
|
|
**Parameters**
|
|
|
|
| Parameter | Type | Description |
|
|
|---|---|---|
|
|
| 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**
|
|
|
|
```javascript
|
|
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**
|
|
|
|
| Parameter | Type | Description |
|
|
|---|---|---|
|
|
| id | string | A unique identifier for the modal, so you can refer to multiple modals. |
|
|
|
|
**Examples**
|
|
|
|
```javascript
|
|
BSDialog5.Find("exampleModal1");
|
|
```
|
|
|
|
**Returns**
|
|
|
|
| Property | Type | Description |
|
|
|---|---|---|
|
|
| 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 |
|
|
|
|
```javascript
|
|
{
|
|
Title: [],
|
|
Body: [],
|
|
Footer: [],
|
|
Close: [],
|
|
Modal: []
|
|
}
|
|
```
|
|
|
|
## Close(id)
|
|
|
|
Close the Modal by the box identifier.
|
|
|
|
**Parameters**
|
|
|
|
| Parameter | Type | Description |
|
|
|---|---|---|
|
|
| id | string | Unique identifier for the modal |
|
|
|
|
**Examples**
|
|
|
|
```javascript
|
|
BSDialog5.Close("exampleModal1");
|
|
```
|
|
|
|
## Clear()
|
|
|
|
Close all Modals on the page.
|
|
|
|
**Examples**
|
|
|
|
```javascript
|
|
BSDialog5.Clear();
|
|
```
|