Create Customizable Bootstrap 4 Modal Windows With ModalDialog

ModalDialog is a jQuery plugin for Bootstrap 4 framework that makes it easier to create customizable modal windows & dialog boxes using Bootstrap 4's modal component.

The goal of this plugin is to help Bootstrap beginners to quickly generate modal windows using JavaScript, without inserting the modal markup & content in the document.

How to use it:

1. Load the needed jQuery library, Bootstrap 4 framework, and Font Awesoime 5 iconic font (for icons) in the HTML document.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/fontawesome/all.css" />
<!-- Dependencies -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the main script modal-dialog.js after Bootstrap JS.

<script src="js/modal-dialog.js"></script>

3. Create a basic modal dialog and override the default modal title/body.

$.ModalDialog({
  "title": "Modal Title",
  "modal_body": "Modal Body"
})

4. Determine whether to allows the modal dialog to be closed by clicking the outside.

$.ModalDialog({
  "title": "Modal Title",
  "modal_body": "Modal Body",
  "easy_close": true
})

5. Customize the action buttons.

$.ModalDialog({
  "title": "Modal Title",
  "modal_body": "Modal Body",
  "close_button_text": "",
  "primary_button_text": "OK",
  "primary_button_class": "btn-success",
  "primary_fa": "check",
  "secondary_button_text": null,
  "secondary_button_class": "btn-success",
  "secondary_fa": "window-close",
})

6. Customize the appearance of the modal dialog.

$.ModalDialog({
  "title": "Modal Title",
  "modal_body": "Modal Body",
  "modal_class": null,
  "header_class": "bg-primary",
  "title_class": null,
  "modal_body": "",
  "modal_body_class": null,
  "footer_class": null
})

---

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