Customizable Confirmation & Prompt Dialog Plugin For Bootstrap 5/4

File Size: 16.5 KB
Views Total: 5
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Confirmation & Prompt Dialog Plugin For Bootstrap 5/4

Bootstrap Confirmation Modal is a JavaScript plugin that lets you create sleek, customizable confirmation and prompt dialog boxes using Bootstrap's modal component.

It works with both Bootstrap 4 (with jQuery) and Bootstrap 5 (using native Javascript with ES6). You can personalize the dialog boxes with different input types, including text fields, number inputs, date pickers, and more. This flexibility can help you gather specific information from users and ask them to verify their choices before taking action. 

How to use it:

1. Download the Bootstrap Confirmation Modal plugin and include the bootstrap-input-modal.min.js script in your project. Make sure you're also including the necessary Bootstrap framework and jQuery library (for Bootstrap 4). 

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<script src="/path/to/v4/bootstrap-input-modal.min.js"></script>

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<script src="/path/to/v5/bootstrap-input-modal.min.js"></script>

2. Use the inputModal.show() function to create your dialog box. You can specify various options, such as the title, message, input type, and button actions/styles. Here's an example of creating a number input prompt dialog:

inputModal.show({

  // shows close button or not
  closeIcon: true,

  // prompt message
  message: 'Enter a value',

  // dialog title
  title: 'Are You Sure?',

  // input type: color, date, datetime-local, email, file, month, number, password, range, search, select, tel, text, time, url, week
  type: 'number', 

  // options for cancel button
  no: {
    class: 'btn btn-danger',
    text: 'Cancel'
  },

  // options for confirm button
  yes: {
    class: 'btn btn-success',
    text: 'Confirm'
  }
  
})
.then(value => {
  console.log('User entered:', value);
})
.catch(() => {
  console.log('No value entered');
});

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