# View Usage

This is the usage guide for [BSDialog4](/bootstrap-js-bsdialog4), version 0.1.4.031.

## Show(options)

Creates the Modal on the page and loads the body from a URL. An existing box will be reused if the ID already exists.

### 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 body of the modal |
| URL | string | URL to load into the modal body. Use null if loading isn't needed or a text message. |
| Size | string | Size of the modal (sm, md, lg, xl). Default is medium (md). |
| Colour | Bootstrap Colour | Colour of the close button in the bottom-right. Default is "secondary". |
| ShowFooter | bool | Show footer or not. Default is true. |
| EasyClose | bool | Close on click-away. Default is true. |

```javascript
{
  ID: null,
  Title: "",
  Message: "",
  URL: null,
  Size: "md",
  Colour: "secondary",
  ShowFooter: true,
  EasyClose: true
}
```

### Examples

```javascript
BSDialog.Show({
  ID: "modalL1",
  Title: "Modal Title",
  Message: "Hello Momo!",
  URL: null,
  Size: "md",
  Colour: "secondary"
});
```

## Prompt(options)

Creates a modal as a prompt. Prompts return a value.

```javascript
{
  Type: "button",
  Title: "",
  Message: "",
  Size: "md",
  EasyClose: true,
  Buttons: [
    { Label: "Yes", Value: "Yes", Colour: "primary" },
    { Label: "No", Value: "No", Colour: "secondary" },
    { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
  ],
  Textbox: {
    Label: "",
    LabelSize: 4,
    Placeholder: "",
    Value: "",
    BoxSize: 8
  }
}
```

### Examples

```javascript
let response = await BSDialog.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);
```

```javascript
let response = await BSDialog.Prompt({
  Type: "textbox",
  Title: "Modal Title",
  Message: "Are you sure want to wait for a response?",
  Size: "md",
  Label: "",
  Placeholder: ""
});

alert(response);
```

## Update(options)

Change the Modal's title, body, footer etc...

```javascript
{
  ID: null,
  Title: null,
  Body: null,
  BodyURL: null,
  Footer: null,
  Size: null
}
```

## Exists(id)

Check if modal exists by identifier

### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| id | string | A unique identifier for the modal, so you can refer to multiple modals. |

### Returns

| | Type | Description |
|---|------|-------------|
| | bool | True, if modal exists |

## 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. |

### 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: []
}
```

### Examples

```javascript
BSDialog.Find("exampleModal1");
```

## Close(id)

Close the Modal by the box identifier.

### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| id | string | Unique identifier for the modal |

### Examples

```javascript
BSDialog.Close("exampleModal1");
```

## Clear()

Close all Modals on the page.

### Examples

```javascript
BSDialog.Clear();
```