bsdialog5/wiki/USAGE.md

Usage: v0.2.0.013

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

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

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

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

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

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

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

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

{
  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

BSDialog5.Close("exampleModal1");

Clear()

Close all Modals on the page.

Examples

BSDialog5.Clear();