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:

• Mobile-friendly Bootstrap 4 Modals With jQuery - bootstrap-fs-modal
• Extend Bootstrap 4 Modal With Extra Features - jQuery modal-js
• Bootstrap 4 Modal Wrapper Plugin With jQuery
• Create Dynamic Bootstrap 4 Modals In jQuery - bootstrap-show-modal.js
• Easy Bootstrap 4 Modal Creator With jQuery - modal_maker
• Dynamic Bootstrap 4 Modal Manager - jQuery bsModal

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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 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.

dynmodal.setShowCloseButton(true);

6. Set the modal footer.

dynmodal.setFooter([
  "<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.

dynmodal.buildAndShow();

8. Hide the modal manually.

// true: uses Bootstrap to close the modal
dynmodal.hide(true);

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.