Usage: v0.2.0.013


This is the usage guide for BSDialog5, version 0.2.0.013.

Usage

 

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();

 

Social Media

 Share Tweet

Post Information

Posted on Mon 21st Aug 2023

Modified on Tue 22nd Aug 2023