bsdialog4/wiki/USAGE.md

View Usage

This is the usage guide for 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.

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

Examples

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.

{
  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

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

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

{
  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

{
  Title: [],
  Body: [],
  Footer: [],
  Close: [],
  Modal: []
}

Examples

BSDialog.Find("exampleModal1");

Close(id)

Close the Modal by the box identifier.

Parameters

Parameter	Type	Description
id	string	Unique identifier for the modal

Examples

BSDialog.Close("exampleModal1");

Clear()

Close all Modals on the page.

Examples

BSDialog.Clear();