This time I will share jQuery Plugin and tutorial about Enhanced Modal Dialog Plugin For Bootstrap 4, hope it will help you in programming stack.
File Size: | 18.3 KB |
---|---|
Views Total: | 972 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery/Bootstrap plugin to create flexible, enhanced, customizable alert, confirmation, prompt, and generic dialog popups based on Bootstrap 4 modal component.
How to use it:
1. To use this plugin, make sure the latest jQuery library and Bootstrap 4 framework are properly loaded in the document.
1 |
< 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" > |
2 |
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" ></ script > |
3 |
< script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous" ></ script > |
4 |
< script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous" ></ script > |
2. Create a basic alert popup box with default settings using the bsd.alert
method.
01 |
bsd.alert( 'Alert Message Here' ,{ |
02 |
03 |
// Callback : [null] | function |
04 |
callback: null , |
05 |
06 |
// The template used to generate dialog. |
07 |
template: "<div class="modal fade"" tabindex=""-1"" role=""dialog"" aria-hidden=""true""><div class=""modal-dialog"" role=""document""><div class=""modal-content""><div class=""modal-body""><p class=""lead bsd-message""></p><div class=""d-flex justify-content-center mt-3""><button type=""button"" class=""btn bsd-close"" data-dismiss=""modal""></button></div></div></div></div></div>""
|