Simple Affirmation Dialogs for Bootstrap 5/4/3 – jQuery bsConfirm

bsConfirm is a light-weight JavaScript library that allows you to create customizable affirmation dialogs utilizing Bootstrap‘s modal element. Suitable with all Bootstrap frameworks together with Bootstrap 5, Bootstrap 4, and Bootstrap 3.

The plugin presently works with <a> hyperlinks and submit buttons inside HTML varieties. This lets you verify actions when customers navigate to a different URL or submit a kind.

The best way to use it:

1. Add the ‘bsConfirm’ jQuery plugin to your Bootstrap challenge.

<!-- Dependencies -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- jQuery bsConfirm Plugin -->
<script src="/path/to/jquery.bsConfirm.js"></script>

2. Use the data-confirm attribute to allow affirmation dialogs on anchor hyperlinks and kind submit buttons throughout the doc.

jQuery(perform($) {
  $('[data-confirm]').bsConfirm();
});

3. Add the data-confirm attribute to your hyperlinks or kind submit buttons.

<a href="one other.html" 
   data-confirm="Are you positive you wish to go to this website?">
   Go to One other Web site
</a>

<kind>
  <button 
    sort="submit" 
    data-confirm="Are you positive you wish to submit this kind?">
    Submit
  </button>
</kind>

4. Customise the title of the verify dialog utilizing the title attribute.

<a href="one other.html" 
   data-confirm="Are you positive you wish to go to this website?"
   title="Customized Dialog Title">
   Go to One other Web site
</a>

5. Customise the button textual content utilizing information attributes or JavaScript.

<a href="one other.html" 
   data-confirm="Are you positive you wish to go to this website?"
   data-confirm-btn="OK" 
   data-cancel-btn="No">
   Go to One other Web site
</a>

jQuery(perform($) {
  $('[data-confirm]').bsConfirm({
    confirmBtn: 'Verify',
    cancelBtn: 'Cancel',
  });
});

6. Customise the kinds of the verify dialog utilizing Bootstrap courses.

• Default
• Main
• Success
• Warning
• Data
• Hazard
• Define
• Gentle

<a href="one other.html" 
   data-confirm="Are you positive you wish to go to this website?"
   class="btn btn-danger">
   Go to One other Web site
</a>

// OR by way of JavaScript
jQuery(perform($) {
  $('[data-confirm]').bsConfirm({
    headerColorMap: {
      major: 'modal-header-primary',
      success: 'modal-header-success',
      warning: 'modal-header-warning',
      data:    'modal-header-info',
      hazard:  'modal-header-danger',
    },
  });
});

This superior jQuery plugin is developed by tropotek. For extra Superior Usages, please examine the demo web page or go to the official web site.