Create Alert & Confirm Dialog Boxes Using Bootstrap 4 Modal Component

Just another jQuery wrapper for Bootstrap 4 modal component that makes it simple to create alert notifications and confirmation dialog boxes on your web app.

How to use it:

1. Import the main JavaScript file modal.js into your Bootstrap 4 project.

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<!-- jQuery & Bootstrap JS -->
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- Modal Wrapper -->
<script src="modal.js"></script>

2. Create an alert popup with or without title & content. All possible alert types:

• info
• success
• warning
• error

$.modal({
  type: "error",
  title: "Alert Title",
  content: "Alert Content"
});

// without content
$.modal({
  type: "error",
  title: "Alert Title"
});

// without title
$.modal({
  type: "error",
  content: "Alert Content"
});

3. Create a confiramtion dialog using custom buttons.

$.modal({
  type: "error",
  title: "Confirm Title",
  content: "Confirm Content",
  buttons: [
    {
      type: "button", // or 'submit'
      label: "Okay",
      callback: function () {
        alert("You just clicked me");
      }
      },
    {
      type: "dismiss", // dismiss will hide the modal
        label: "Close"
      }
  ]
});

4. Adjust the modal size.

$.modal({
  type: "error",
  title: "Alert Title",
  size: "" // "sm", "lg", "xl"
});

---

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