Multifunctional Dialog Popup Plugin For Bootstrap 4/3 - Alert Box

The jQuery/Bootstrap alert box plugin takes advantage of Bootstrap 4 (or Bootstrap 3) modal component to create loading modal, alert popup and confirmation dialog on the webpage.

How to use it:

1. Include the necessary Bootstrap 4/3 framework and jQuery library on the page.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Download and include the Bootstrap Alert Box plugin after Bootstrap's JavaScript.

<script src="src/js/bootstrap-alert-box.js"></script>

3. Create a loading modal with custom loading text.

openWaitDialog("<i class='fa fa-spinner fa-spin'></i> Loading Text Here");

4. Create a basic alert dialog.

messageDialog({

  // dialog message
  msg: "Alert message Here",

  // error theme?
  error: false,

  // text for close button
  closeBtnText:  "Close",

  // dialog size
  // large/medium/small
  size: "small"

})

5. Create an action dialog that will perform a custom action when clicking on the action button.

actionDialog({

  // dialog message
  msg: "Message Here",

  // custom function
  action: function(){ alert('Custom Action')},

  // success theme?
  success: false,

  // text for action button
  actionBtnText:  "Ok",

  // dialog size
  // large/medium/small
  size: "small"
  
})

6. Create a confirmation dialog with Confirm/Cancel callbacks.

confirmDialog({

  // dialog message
  msg: "Confirm message Here",

  // confirm action
  yesAction: function(){ alert('Confirmed')},

  // text for confirm button
  yesBtnText: "Yes",

  // cancel action
  noAction: function(){ alert('Canceled')},

  // text for cancel action
  noBtnText: "No",

  // text for close button
  closeBtnText:  "Close",

  // dialog type
  // info/success/danger
  type: "info"

})

7. Close the existing dialog manually.

closeDialog();

---

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