# Bootstrap4Dialog Examples

### Dialog with Title & Message

Run code

    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)