Multi-purpose Dialog Window Plugin With Bootstrap 4 - DialogBoxService.js

DialogBoxService.js is a jQuery/Bootstrap popup plugin for creating customizable dialog boxes and loading indicators using Bootstrap 4's modal component.

Features:

• Alert/warning/info/success dialog boxes.
• Confirmation dialog boxes with confirm actions.
• Circle loading indicator for dynamic content.
• Customizable type, size, title, message and buttons.

How to use it:

1. Load the JavaScript file DialogBoxService.js in your Bootstrap page.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<!-- Main JavaScript -->
<script src="DialogBoxService.js"></script>

2. The JavaScript syntax to create dialog boxes.

// info dialog
$.DialogBox().ShowDialogBox();

// alert dialog
$.DialogBox().ShowAlertDialogBox();

// warning dialog
$.DialogBox().ShowWarningDialogBox();

// success dialog
$.DialogBox().ShowSuccessDialogBox();

3. Show/hide a loading indicator on the page.

$.DialogBox().ShowLoadingIndicator();
setTimeout( function () {
  $.DialogBox().HideLoadingIndicator();
}, 3000);

4. Create a customizable confirmation dialog.

$.DialogBox().ShowConfirmDialogBox({
  CallBack: function (result ) {
     if( result == true ) {
      alert( result);
     }
  }
});

5. Full customization options.

$.DialogBox().ShowDialogBox({

  /* primary
     secondary
     success
     warning
     danger
     info
     light
     dark
  */
  Type: 'primary',

  /* modal-lg
     modal-sm
  */
  Size: '',

  // extra CSS classes
  cssClass: '',

  // is closable?
  CloseAble: true,

  // dialog title
  Title: '',

  // dialog message
  Message: 'No Message',

  // custom buttons
  Buttons: [{
    label: 'Close',
    action: function(obj){
        if (typeof obj.modal.UserOptions.CallBack === 'function' && obj.modal.UserOptions.CallBack.call(this, true) === false)
        {
            return false;
        }
        obj.modal.HideDialog();
    }
  }],

  // callback function
  CallBack: null
  
});

---

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