Make use of Bootstrap's 4 Modal in a more friendly way.


Full example

Full functionality of SimpleBsDialog.


Available options


Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a title to display.
Most options can be set via init options or property setters.

Option Type Default value Description
width String or Integer 500 The dialog's width in pixels or percent. Examples:
SimpleBsDialog.show({ width: '900px', });

SimpleBsDialog.show({ width: '70%', });

SimpleBsDialog.show({ width: '600', });
autoWidth Boolean false Enables resizing the dialog when the document is resized. It applies only when the 'width' value is set in percent.
SimpleBsDialog.show({ width: '80%', autoWidth: true, });
height String or Integer 280 The dialog's height in pixels or percent. Examples:
SimpleBsDialog.show({ height: '300px', });

SimpleBsDialog.show({ height: '60%', });
autoHeight Boolean false Enables resizing the dialog when the document is resized. It applies only when the 'height' value is set in percent.
SimpleBsDialog.show({ height: '60%', autoHeight: true, });
title String The dialog's title.
closable Boolean true Show|hide the close button at the top right corner.
spinner Boolean false Show|hide the spinner icon.
spinnerIcon String
Set the spinner's icon.
closeByBackdrop Boolean true When it's true, you can close it by clicking outside the dialog.
closeByKeyboard Boolean true When it's true, you can close it by pressing the ESC key.
html String The dialog's content.
cssClass String Additional css classes that will be added to your dialog.
buttons Array Example:
SimpleBsDialog.show({ buttons: [{ id: 'btn-ok', label: 'OK', cssClass: 'btn-primary', action: function(dialogRef) { dialogRef.close(); }, }, ], });
id: optional, otherwise a random id will be generated.
label: optional, the button's title.
cssClass: optional, additional css class to be added to the button.
action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.
onShow function If provided, it will be invoked when the dialog is popping up.
onShown function If provided, it will be invoked when the dialog is popped up.
onHide function If provided, it will be invoked when the dialog is popping down.
onHidden function If provided, it will be invoked when the dialog is popped down.

Available methods


Method Description
open() Opens the dialog. Usage: dialogInstance.open().
close() Closes the dialog. Usage: dialogInstance.close().
get(option) Getter for options. You can get the following options:
width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon
set(option, value) Setter for a given option. You can set the following options:
width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon
set(options) Setter for many options. You can set the following options:
width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon
getModalBody() Returns the raw modal body.
getButton(id) Returns a button by id as a jQuery object.
getButtons() Returns all available buttons as jQuery objects.
SimpleBsDialog.show(options) Creates a new dialog with options, opens it and returns the dialog object.
SimpleBsDialog.version Returns the current SimpleBsDialog's version.