Programmatic Bootstrap 4 Modal Generator - DynModal

Programmatic Bootstrap 4 Modal Generator - DynModal

DynModal is an easy-to-use jQuery plugin used to dynamically generate programmatic alert/confirm/prompt dialog boxes using Bootstrap 4 modal component. Inspired by the jQuery Bootbox plugin.

See also:

How to use it:

1. Insert the minified version of the jQuery DynModal plugin into your Bootstrap 4 project.

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- jQuery DynModal Plugin -->
<script src="dist/dynmodal.min.js"></script>

2. Initialize the jQuery DynModal plugin.

let dynmodal = new DynModal.Core();

3. Set the modal title.

dynmodal.setHeaderTitle("Modal Title");

4. Set the modal body.

dynmodal.setBody(() => $("#element").html());
dynmodal.setBody(() => "<p>Modaodal content</p>");
dynmodal.setBody(() => document.getElementById("#element").innerHTML;);

5. Decide whether to show the close button.


6. Set the modal footer.

  "<button type='button' class-'btn btn-primary'>Confirm</button>",
  "<button type='button' class='btn btn-danger' data-close>Close</button>"

7. Build and show the modal.


8. Hide the modal manually.

// true: uses Bootstrap to close the modal

9. If you want to vertically center the modal.

let dynmodal = new DynModal.Core({
    centerVertically: true

10. If you want to disable the show/hide animations.

let dynmodal = new DynModal.Core({
    removeAnimation: true

11. Specify the modal size.

let dynmodal = new DynModal.Core({
    // ModalSize.SMALL, ModalSize.DEFAULT, ModalSize.LARGE
    size: ModalSize.DEFAULT

12. Callback functions.

let dynmodal = new DynModal.Core({
    onBuilt: function(e) {
      // ...
    onShown: function(id, modal) {
      // ...
    onHidden: function(id) {
      // ...

This awesome jQuery plugin is developed by jcoon97. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 06.12.2018
  • Source