Simple Confirmation Dialogs on Click – Bootstrap 5 Confirm Popover

Bootstrap 5 Confirm Popover is a JavaScript plugin that attaches a custom confirm dialog to clickable elements (e.g., links or buttons) using Bootstrap’s Popover component.

Features:

• Supports one-button or two-button confirmation modes
• Customizable button text and colors
• Data attribute API for quick implementation
• Small footprint (~1KB minified)

See It In Action:

Use Cases:

• Delete operations – Prevent accidental deletions by requiring confirmation before removing database records, files, or user content
• Form submissions with consequences – Add confirmation before submitting forms that trigger significant changes like publishing content or changing account settings
• Navigation guards – Warn users before navigating away from forms with unsaved changes or when leaving critical workflow steps
• Critical action protection – Add verification before executing operations like payments, subscriptions, or sending mass communications

How to use it:

1. To get started, make sure you first have the latest Bootstrap 5 framework loaded in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Download and load the ‘bootstrap5-confirm.js’ script after Bootstrap’s JavaScript:

<script src="/dist/bootstrap5-confirm.js"></script>

3. Create a confirm popover that will redirect the page to https://www.cssscript.com when you click ‘Yes’.

<button 
  class="btn btn-danger" 
  data-confirm="true" 
  data-message="Are you sure?" 
  data-href="https://www.cssscript.com">
  Download The Plugin
</button>
<!-- OR -->
<a 
  href="https://www.cssscript.com" 
  class="btn btn-warning" 
  data-confirm="true" 
  data-message="Are you sure?">
  Download The Plugin
</a>

3. Create a custom confirm popover with the following HTML data attributes:

• data-confirm="true": (Required) Enables the confirmation popover on the element.
• data-message="Your message": The text displayed in the popover. Defaults to “Are you sure?”.
• data-href="/path/to/action": If present, the browser will navigate to this URL upon confirmation. Works for both buttons and anchor tags (where it can override the href attribute for the confirmation action).
• data-confirm-text="Confirm Text": Custom text for the confirmation button. Defaults to “Yes”.
• data-cancel-text="Cancel Text": Custom text for the cancel button (in two-button mode). Defaults to “No”.
• data-single-button="true": Set to true for a single confirmation button.
• data-confirm-color="success": Bootstrap button color class (e.g., primary, success, danger) for the confirm button in single-button mode only.

<button 
  class="btn btn-warning"
  data-confirm="true"
  data-message="Visit CSSScript?"
  data-confirm-text="Continue"
  data-confirm-color="success"
  data-single-button="true"
  data-href="https://www.cssscript.com">
  Download The Plugin
</button>

4. For more advanced scenarios, like triggering an AJAX call instead of navigation, you can use the ConfirmPopover class directly:

const myButton = document.getElementById('customActionButton');
myButton.addEventListener('click', (e) => {
  e.preventDefault(); // Important if it's a link or submit button
  createConfirmPopover({
    element: myButton,
    message: "Submit this data via AJAX?",
    confirmText: "Submit",
    cancelText: "Hold Up",
    onConfirm: () => {
      console.log("Confirmed! Firing AJAX request...");
      // fetch('/api/submit', { method: 'POST', body: ... })
      //   .then(...)
    },
    onCancel: () => {
      console.log("Cancelled by user.");
    },
    placement: 'right', // Example of setting placement via JS
    // singleButton: false, // Default
    // confirmColor: 'primary' // Default
  });
});

FAQs

Q: Can I change the popover’s placement (e.g., to the bottom or side)?
A: Yes. The ConfirmPopover class accepts a placement option (e.g., 'bottom', 'left', 'right'). If you’re using the JavaScript API (createConfirmPopover), you can pass it directly. The default DOMContentLoaded listener doesn’t automatically parse a data-placement attribute, so for declarative placement, you’d either need to customize that listener or stick to the JS setup.

Q: How do I run an AJAX request or custom JavaScript on confirm, instead of navigating?
A: You’ll need to use the JavaScript API. Prevent the default click behavior of your button/link, then call createConfirmPopover with a custom onConfirm function. Inside that function, you can put any JavaScript logic, like a fetch call.

Q: Is it safe to put HTML in the data-message?
A: The plugin uses html: true and sanitize: false when creating the Bootstrap Popover. This means HTML in the message will be rendered. While this allows for more flexible message formatting, be cautious: **if the content of data-message can be influenced by user input, this could open you up to XSS attacks.

Q: Why is there a setTimeout in the plugin’s code?
A: The setTimeout(() => { ... }, 50); in the _showPopover method is a common technique. It introduces a very brief delay before trying to find and attach event listeners to the buttons inside the newly created popover. This helps ensure that the popover’s HTML has been fully rendered into the DOM by the browser, making the buttons available for querySelector. Without it, on some occasions, the script might try to access elements that aren’t quite ready.