Minimal Bootstrap Modal Creator With jQuery - Bootdialog

Minimal Bootstrap Modal Creator With jQuery - Bootdialog
File Size: 6.77 KB
Views Total: 98
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Bootdialog is an ultra-light jQuery plugin that enables developers to programmatically create Bootstrap modal windows and alert/confirm dialog boxes with ease.

Supports both Bootstrap 4 and Bootstrap 3.

How to use it:

1. To get started, load the Bootdialog plugin after loading the latest jQuery library and Bootstrap framework.

<!-- jQuery + Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- jQuery + Bootstrap -->
<script src="dist/js/bootdialog.js"></script>

2. Create a Bootstrap dialog in the JavaScript:

const myDialog = new bootDialog({
      id: 'unique ID here',
      heading: "Dialog Title",
      body: "Dialog Body Here"
      buttons: [
        { 
          label: "Confirm", 
          class: "btn btn-primary", 
          fn: function() {
            // fired on click
          } 
        },
        { 
          label: "Cancel", 
          class: "btn btn-secondary", 
          fn: function(e) {
            // fired on click
          } 
        }
      ]
});

3. Show & hide the Bootstrap dialog when needed.

// show
myDialog.show();

// hide
myDialog.hide();

 


This awesome jQuery plugin is developed by haritech007. For more Advanced Usages, please check the demo page or visit the official website.