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

Multi-purpose Dialog Window Plugin With Bootstrap 4 - DialogBoxService.js
File Size: 7.39 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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


  • 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="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" 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

// alert dialog

// warning dialog

// success dialog

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

setTimeout( function () {
}, 3000);

4. Create a customizable confirmation dialog.

  CallBack: function (result ) {
     if( result == true ) {
      alert( result);

5. Full customization options.


  /* primary
  Type: 'primary',

  /* modal-lg
  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' &&, true) === false)
            return false;

  // 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.