Bootstrap4Dialog Examples

Dialog with Title & Message

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

Static Danger Dialog with Title only

Run code

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

Warning Centered Dialog Message only, with 2 seconds duration

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',
    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)