Bootstrap 4 Dialog Examples

Create Bootstrap 4 Dialog Modals Easily!

Dialog with Title & Message

Run code
    
Bootstrap4Dialog.show({
    title: 'Sample Title 1',
    backdrop: Bootstrap4Dialog.BACKDROP_NO,
    message: 'Message text goes here'
})

Static Danger Dialog with Title

Run code
    
Bootstrap4Dialog.show({
    title: 'Sample Title 2',
    type: Bootstrap4Dialog.TYPE_DANGER,
    backdrop: Bootstrap4Dialog.BACKDROP_STATIC
})

Toast Like Notification Box

Run code
    
Bootstrap4Dialog.show({
    message: 'Sample message will be hidden in 2 seconds',
    type: Bootstrap4Dialog.TYPE_WARNING,
    centered: true,
    duration: 2
})

Long Message Dialog without Backdrop

Run code
    
Bootstrap4Dialog.show({
    title: 'Long message without backdrop',
    type: Bootstrap4Dialog.TYPE_DANGER,
    centered: true,
    backdrop: Bootstrap4Dialog.BACKDROP_NO,
    message: 'Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
'
})

Long Scrollable Message Dialog

Run code
    
Bootstrap4Dialog.show({
    title: 'Long message text will disappears in 2 seconds',
    type: Bootstrap4Dialog.TYPE_DANGER,
    scrollable: true,
    message: 'Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
',
})

Multiple overlapping Dialogs

Run code
    
Bootstrap4Dialog.show({
    title: 'Title 1',
    centered: true,
    type: Bootstrap4Dialog.TYPE_SUCCESS,
});
Bootstrap4Dialog.show({
    message: 'Message 2',
    type: Bootstrap4Dialog.TYPE_INFO,
    duration: 2
})

Large Message Dialog with callbacks

Run code
    
Bootstrap4Dialog.show({
    title: 'Title 1',
    message: $('
').load('message.html'),
    centered: true,
    size: Bootstrap4Dialog.SIZE_LARGE,
    type: Bootstrap4Dialog.TYPE_DARK,
    open: function() {
        Bootstrap4Dialog.show({
            title: 'Dialog displayed',
            size: Bootstrap4Dialog.SIZE_SMALL,
            type: Bootstrap4Dialog.TYPE_LIGHT,
            duration: 0.5
        })
    },
    close: function() {
        Bootstrap4Dialog.show({
            message: 'Dialog closed',
            size: Bootstrap4Dialog.SIZE_SMALL,
            type: Bootstrap4Dialog.TYPE_LIGHT,
            backdrop: Bootstrap4Dialog.BACKDROP_NO,
            duration: 0.5
        })
    }
});

Dialog with Buttons

Run code
    
Bootstrap4Dialog.show({
    title: 'Sample Title',
    message: 'Message text goes here',
    centered: true,
    backdrop: Bootstrap4Dialog.BACKDROP_STATIC,
    open: function() {
        $('#btn-cancel-2').focus();
    },
    buttons: [
    {
        id: 'btn-cancel-2',
        label: 'Cancel',
        cssClass: 'btn btn-light',
        action: function(dialog) {
            dialog.modal('hide');
        }
    },
    {
        id: 'btn-submit-2',
        label: ' Submit',
        cssClass: 'btn btn-sm btn-danger',
        action: function(dialog) {
            alert('fake form submittion..');
            dialog.modal('hide');
        }
    }
    ]
})

Close the dialog manually from JavaScript

Run code
    
var dialogForManualClose = Bootstrap4Dialog.show({
    title: 'Sample Title 1',
    message: 'Message text goes here'
})

setTimeout(function() {
    dialogForManualClose.modal('hide');
}, 3000)