Confirm
Use Bootstrap's JavaScript confirm plugin to ask for user awareness on clicking a link or submitting a form.
Please note that the modal element is removed right after disappear from screen.
Overview
Things to know when using the confirm helper
- The bootstrap version must be greater then or equal to 4.2
- If you're building Bootstrap JavaScript from source, make sure Modal plugin is included.
- This helper developed and tested under Bootstrap 4.3.1
- The modal element will be generated when user click the link or submit the form
Examples
Link
This is the example of confirmation on link. Adding attribute data-toggle="confirm"
to an <a>
with other attribute for the info to add confirmation on it.
Form
The confirmation can also injected to a <form>
element. For this to work, you need to add the confirmation manually by javascript.
Link With JQuery
The jQuery method also work for link instead of data attribute.
Usage
The confirm plugin generate your confirmation modal when it get executed ( click or submit ), via JavaScript
or data attribute. For element <form>
can only triggered by JavaScript because limitation of event the document can receive from the dom.
Via data attribute
Implementation with data attribute can only be done for <a>
element. Set attribute data-toggle="confirm"
on a <a>
element.
Via JavaScript
Call an element with selector with single line of JavaScript.
Options
Options can be passed via data attribute or JavaScript. For data attributes, append the option name to data-
, as in data-title="..."
, or data-btn-confirm="..."
.
Name |
Type |
Default |
Description |
title |
string |
Confirmation |
The modal element title. |
text |
string |
Are you sure want to do the action? |
The modal body text content. |
ask |
boolean |
false |
Show the modal confirmation when initilaized. |
btnConfirm |
string |
Yes |
Text for confirm button |
btnType |
string |
primary |
Button type for confirmation button. Without prefix btn- . |
btnCancel |
string |
Cancel |
Text for cancel button |