This time I will share jQuery Plugin and tutorial about Create Enhanced And Customizable Bootstrap 4 Modals With jQuery, hope it will help you in programming stack.
simple-bs-dialog.js is a jQuery plugin that simplifies the creation of Bootstrap 4 modal component and enhances the modal windows with several advanced features.
Features:
- Creates Bootstrap 4 modal windows with a single JS call.
- Highly customizable appearance of the modal window.
- Auto adjusts the modal size depending on the modal content.
- Shows a loading spinner while loading the modal content.
- Custom action buttons.
- Useful API methods and event handlers.
How to use it:
1. Download and insert the simple-bs-dialog.js plugin’s files into your Bootstrap 4 project.
2 |
<link rel="stylesheet" href="bootstrap.min.css" /> |
4 |
<link href="./dist/css/simple-bs-dialog.min.css" rel="stylesheet" /> |
6 |
<script src="jquery.min.js"></script> |
7 |
<script src="bootstrap.min.js"></script> |
9 |
<script src="./dist/js/simple-bs-dialog.min.js"></script> |
2. Create a basic Bootstrap 4 modal window.
3 |
html: 'Modal Content Here' |
3. Show a loading spinner before showing the modal content.
04 |
spinnerIcon: '<span class="spinner-border text-primary" role="status"></span>', |
05 |
onShown: function(dialogRef) { |
06 |
setTimeout(function() { |
09 |
}).getModalBody().html('Your content goes here...'); |
10 |
dialogRef.getButtons().prop('disabled', false); |
4. Customize the action buttons.
05 |
cssClass: 'btn-primary', |
06 |
action: function(dialogRef) { |
07 |
console.log('OK button pressed!'); |
13 |
cssClass: 'btn-warning', |
14 |
action: function(dialogRef) { |
15 |
console.log('Cancel button pressed!'); |
5. Full plugin options to customize the Bootstrap 4 modal window.
10 |
spinnerIcon: '<span class="spinner-border" role="status"></span>', |
11 |
closeByBackdrop: true, |
12 |
closeByKeyboard: true, |
6. Available callback functions.
2 |
onShow: function(dialogRef){}, |
3 |
onShown: function(dialogRef){}, |
4 |
onHide: function(dialogRef){}, |
5 |
onHidden: function(dialogRef){} |
7. API methods.
- open(): Opens the modal.
- close(): Closes the modal.
- get(option): Getter for options.
- set(option, value): Setter for a given option.
- set(options): Setter for many options.
- getModalBody(): Returns the raw modal body.
- getButton(id): Returns a button by id as a jQuery object.
- getButtons(): Returns all available buttons as jQuery objects.
- SimpleBsDialog.version: Returns the current SimpleBsDialog’s version.
Changelog:
2019-09-30
This awesome jQuery plugin is developed by wraplr. For more Advanced Usages, please check the demo page or visit the official website.
