Dynamically Create Twitter Bootstrap Modal Dialog | Bootstrap4Dialog

How to make use of it:

1. Download the package deal and insert the core JavaScript bootstrap4dialog.js into your Bootstrap 4 undertaking.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="/path/to/dist/js/bootstrap4dialog.min.js"></script>

2. Create a primary dialog with title and message.

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

3. Create a toast-like notification box that routinely dismisses after 3 seconds.

Bootstrap4Dialog.show({
  message: 'Toast Message Here', 
  duration: 5
});

4. Create a modal window with customized buttons. Ideal for alert & confirmation dialog boxes.

Bootstrap4Dialog.show({
  title: 'Confirm Dialog',
  message: 'Are You Sure',
  buttons: [{
    id: 'btn-cancel',
    label: 'Cancel',
    cssClass: 'btn btn-light',
    action: function(dialog) {
      dialog.modal('hide');
    }
  },
  {
    id: 'btn-submit',
    label: ' Submit',
    cssClass: 'btn btn-sm btn-danger',
    action: function(dialog) {
      alert('fake form submittion..');
      dialog.modal('hide');
    }
  }]
})

5. Specify the type of modal. All attainable varieties:

Bootstrap4Dialog.TYPE_PRIMARY = "primary";
Bootstrap4Dialog.TYPE_SECONDARY = "secondary";
Bootstrap4Dialog.TYPE_SUCCESS = "success";
Bootstrap4Dialog.TYPE_DANGER = "danger";
Bootstrap4Dialog.TYPE_WARNING = "warning";
Bootstrap4Dialog.TYPE_INFO = "info";
Bootstrap4Dialog.TYPE_LIGHT = "light";
Bootstrap4Dialog.TYPE_DARK = "dark";

6. Determine the size of the action buttons.

Bootstrap4Dialog.SIZE_SMALL = "modal-sm";
Bootstrap4Dialog.SIZE_MEDIUM = "";
Bootstrap4Dialog.SIZE_LARGE = "modal-lg";
Bootstrap4Dialog.SIZE_EXTRA_LARGE = "modal-xl";

7. Determine whether or not to show the backdrop.

Bootstrap4Dialog.BACKDROP_YES = "true";
Bootstrap4Dialog.BACKDROP_NO = "";
Bootstrap4Dialog.BACKDROP_STATIC = "static";

Bootstrap4Dialog.show({
  backdrop: Bootstrap4Dialog.BACKDROP_NO
})

8. Determine whether or not to allow the ‘Scrolling a position’ conduct on the modal.

Bootstrap4Dialog.show({
  scrollable: true
})

9. Determine whether or not to routinely destroy the modal after hidden.

Bootstrap4Dialog.show({
  autodestroy: false
})

10. Trigger customized features when the modal is closed and hidden.

Bootstrap4Dialog.show({
  open: function() {
    // do something
  },
  close: function() {
    // do something
  }
})

11. Close the modal manually.

instance.modal('hide');

Create Dynamic Bootstrap 4 Dialogs With JavaScript, Bootstrap4Dialog Plugin/Github

See Demo And Download