Confirm User Intentions Using Bootstrap 4 Modal - Bootstrap Confirm

Yet another Bootstrap 4 confirm plugin which displays a custom confirmation dialog when the users are about to visit another link and/or submit the HTML form.

Based on jQuery and Bootstrap 4 modal component.

See also:

• 10 Best Dialog Plugins To Replace The Native JS Popup Boxes

How to use it:

1. Include the JavaScript file bootstrap-confirm.js on the web page which has both jQuery library and Bootstrap framework loaded.

<script src="/path/to/jquery.slim.min.js" ></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-confirm.js"></script>

2. Display a confirm dialog when the user clicks on a link within the document. In this example, we're going to use the data-toggle attribute to automatically initialize the plugin.

<a href="https://jqueryscript.net" class="btn btn-primary" data-toggle="confirm">
  Goto jQueryScript.net
</a>

3. Display a confirm dialog when the user submit an HTML form.

<form id="form-example">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Username" name="name">
  </div>
  <div class="form-group">
    <button class="btn btn-primary">Submit</button>
  </div>
</form>

$('#form-example').confirm({
  // options here
})

4. Customize the confirm dialog by passing the following options to the confirm function.

$('#form-example').confirm({

  // dialog title
  title: 'Confirmation',

  // dialog content
  text: 'Are you sure want to do the action?',

  // shows the confirm dialog on init
  ask: false,

  // confirm/cancel text
  btnConfirm: 'Yes',
  btnCancel: 'Cancel'

  // Bootstrap button type
  btnType: 'primary'
  
})

5. Or via data-option attributes:

<a href="https://jqueryscript.net" class="btn btn-primary" data-toggle="confirm" data-btn-confirm="Confirm!">
  Goto jQueryScript.net
</a>

 

---

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