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

Full example

Full functionality of SimpleBsDialog.


        SimpleBsDialog.show({
            width: '900px',
            autoWidth: false,
            height: '30%',
            autoHeight: true,
            title: 'Simple Bootstrap 5 Dialog (v' + SimpleBsDialog.version + ')',
            closable: true,
            spinner: true,
            spinnerIcon: '<span class="spinner-border text-primary" role="status"></span>',
            closeByBackdrop: true,
            closeByKeyboard: true,
            html: '',
            cssClass: 'login-dialog',
            buttons: [{
                    id: 'btn-ok',
                    label: 'OK',
                    cssClass: 'btn-primary',
                    action: function(dialogRef) {
                        console.log('OK button pressed!');
                        dialogRef.close();
                    },
                }, {
                    id: 'btn-cancel',
                    label: 'Cancel',
                    cssClass: 'btn-warning',
                    action: function(dialogRef) {
                        console.log('Cancel button pressed!');
                        dialogRef.close();
                    },
                },
            ],
            onShow: function(dialogRef) {
                console.log('onShow');

                dialogRef.getButtons().prop('disabled', true);
            },
            onShown: function(dialogRef) {
                console.log('onShown');

                setTimeout(function() {
                    dialogRef.set({
                        'spinner': false,
                    }).getModalBody().html('Your content goes here...');

                    dialogRef.getButtons().prop('disabled', false);
                }, 1000);
            },
            onHide: function(dialogRef) {
                console.log('onHide');
            },
            onHidden: function(dialogRef) {
                console.log('onHidden');
            },
            onHidePrevented: function(dialogRef) {
                console.log('onHidePrevented');
            },
        });

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 
<span class="spinner-border" role="status"></span>
 Set the spinner's icon.
closeByBackdrop Boolean or the string 'static' true When it's true, you can close it by clicking outside the dialog. Alternatively, specify 'static' for a backdrop which doesn't close the modal on click. 

            SimpleBsDialog.show({
                width: '900px',
                closeByBackdrop: 'static',
                closeByKeyboard: false,
                closable: false,
                buttons: [{
                        id: 'btn-cancel',
                        label: 'Cancel',
                        cssClass: 'btn-warning',
                        action: function(dialogRef) {
                            console.log('Cancel button pressed!');
                            dialogRef.close();
                        },
                    },
                ],
            });
closeByKeyboard Boolean true When it's true, you can close it by pressing the ESC key.
putFocus Boolean true Puts the focus on the modal when initialized.
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.
onHidePrevented function This event is fired when the modal is shown, its closeByBackdrop is 'static' and a click outside the modal or an escape key press is performed with the closeByKeyboard option set to false. Note: available with Bootstrap 5 only.

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.