Custom Confirm Dialog With Bootstrap 5 - confirmbutton.js

Custom Confirm Dialog With Bootstrap 5 - confirmbutton.js
File Size: 31.5 KB
Views Total: 103
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

confirmbutton.js is a jQuery plugin that helps create highly customizable confirmation dialog boxes using Bootstrap 5's modal component.

The confirm dialog can be attached to any elements such as links, buttons, images, lists, input fields, etc.

How to use it:

1. Load the needed jQuery library and Bootstrap 5 framework.

<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.min.js"></script>

2. Load the confirmbutton.js plugin.

<script src="confirmbutton.js"></script>

3. Create a basic confirmation button and define the message in the confirm attribute.

<button type="button" confirm="Are your sure?">
  Confirm Button
</button>

4. Or initialize the plugin via JavaScript and trigger a function after the confirm button has been clicked.

<button type="button">
  Confirm Button
</button>
$('button').confirmButton({
  confirm: "Are you really sure?"
});

5. You can also attach the confirm dialog to an input field and submit the form after the confirm button has been clicked.

<form>
  <input type="text" name="name" placeholder="name to submit">
  <button type="submit" confirm="Want to submit?">
    Submit
  </button>
</form>

6. Create a custom confirm dialog. In this example, a Bootstrap modal dialog is created. The "confirm" attribute is set to empty, and the data-dialog is set to a selector that obtains the dialog; then the data-confirmbtn is set to a selector to get the "save" button from the dialog.

<div class="modal" tabindex="-1" id="myconfirmdlg" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Modal title</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <h3>Are you sure you want to save data?</h3>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary save">Save changes</button>
    </div>
    </div>
  </div>
</div>
<form>
  <input type="text" name="q">
  <button confirm="" data-dialog="#myconfirmdlg" data-confirmbtn="button.save" type="submit">
    Send
  </button>
</form>

7. Not only buttons, you can attach the confirm dialog to any elements:

<a href="https://www.jqueryscript.net" confirm="Want to go to jQueryScript?">
  jQueryScript
</a>
<ul>
  <li confirm="Confirm item 1">item 1</li>
  <li confirm="Confirm item 2">item 2</li>
  <li confirm="Confirm item 3">item 3</li>
</ul>

8. Available plugin options that can be passed via HTML data attributes:

  • data-texttarget: The selector used to put the confirm message in the modal. Default: "p.confirm-text"
  • data-confirmbtn: The selector used to get the confirm button (this is needed to work properly; if not found the confirmation cannot be detected). Default: "button.confirm"
  • data-cancelbtn: The selector used to get the cancel button (this is not needed if the modal can be cancelled using other means like esc-key). Default: "button.cancel"
  • data-dialog: The selector used to get the dialog. If not provided or not found, a default dialog will be created to confirm and destroyed once the modal is closed.
  • data-canceltxt: The text to show in the cancel button. It is only valid if data-dialog is not used. Default: "Cancel". 
  • data-confirmtxt: The text to show in the confirm button. It is only valid if data-dialog is not used. Default: "Confirm". 
<button confirm="Are you sure?" 
        data-dialog="#myconfirmdlg" 
        data-confirmbtn="button.save" 
        type="submit">
        Send
</button>

Changelog:

2021-11-18

  • correct one bug with previous onclick and add title configuration

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