enhanced modal dialog bootstrap - Free Download Enhanced Modal Dialog Plugin For Bootstrap 4

Free Download Enhanced Modal Dialog Plugin For Bootstrap 4

Posted on

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.

enhanced modal dialog bootstrap - Free Download Enhanced Modal Dialog Plugin For Bootstrap 4
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>""