This time I will share jQuery Plugin and tutorial about Multi-purpose Dialog Window Plugin With Bootstrap 4 – DialogBoxService.js, hope it will help you in programming stack.
| File Size: | 7.39 KB |
|---|---|
| Views Total: | 599 |
| 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.
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.
1 |
<!-- Bootstrap CSS --> |
2 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> |
3 |
<!-- jQuery first, then Popper.js, then Bootstrap JS --> |
4 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
5 |
<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> |
6 |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> |
7 |
<!-- Main JavaScript --> |
8 |
<script src="DialogBoxService.js"></script> |
2. The JavaScript syntax to create dialog boxes.
01 |
// info dialog |
02 |
$.DialogBox().ShowDialogBox(); |
03 |
04 |
// alert dialog |
05 |
$.DialogBox().ShowAlertDialogBox(); |
06 |
07 |
// warning dialog |
08 |
$.DialogBox().ShowWarningDialogBox(); |
09 |
10 |
// success dialog |
11 |
$.DialogBox().ShowSuccessDialogBox(); |
3. Show/hide a loading indicator on the page.
1 |
$.DialogBox().ShowLoadingIndicator(); |
2 |
setTimeout( function () { |
3 |
$.DialogBox().HideLoadingIndicator(); |
4 |
}, 3000); |
4. Create a customizable confirmation dialog.
1 |
$.DialogBox().ShowConfirmDialogBox({ |
2 |
CallBack: function (result ) { |
3 |
if( result == true ) { |
4 |
alert( result); |
5 |
} |
6 |
} |
7 |
}); |
5. Full customization options.
01 |
$.DialogBox().ShowDialogBox({ |
02 |
03 |
/* primary |
04 |
secondary |
05 |
success |
06 |
warning |
07 |
danger |
08 |
info |
09 |
light |
10 |
dark |
11 |
*/ |
12 |
Type: 'primary', |
13 |
14 |
/* modal-lg |
15 |
modal-sm |
16 |
*/ |
17 |
Size: '', |
18 |
19 |
// extra CSS classes |
20 |
cssClass: '', |
21 |
22 |
// is closable? |
23 |
CloseAble: true, |
24 |
25 |
// dialog title |
26 |
Title: '', |
27 |
28 |
// dialog message |
29 |
Message: 'No Message', |
30 |
31 |
// custom buttons |
32 |
Buttons: [{ |
33 |
label: 'Close', |
34 |
action: function(obj){ |
35 |
if (typeof obj.modal.UserOptions.CallBack === 'function' && obj.modal.UserOptions.CallBack.call(this, true) === false) |
36 |
{ |
37 |
return false; |
38 |
} |
39 |
obj.modal.HideDialog(); |
40 |
} |
41 |
}], |
42 |
43 |
// callback function |
44 |
CallBack: null |
45 |
|
46 |
}); |
This awesome jQuery plugin is developed by YuiLingo. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
