Popconfirm

Popconfirm - Bootstrap 5 & Material Design 2.0 components

Popconfirm basically is a simple alert with confirmation buttons.

Note: Read the API tab to find all available options and advanced customization

Basic example

Basic example of popconfirm usage

Display mode

You need to apply .popconfirm-toggle class to button.

You can choose between modal and inline to modify display mode.

Modal mode is rendered at the center of the screen and is static, you can't change its position but all other attributes can be applied

Icon example

To apply icon to message you need to give class in data-mdb-popconfirm-icon like on example data-mdb-popconfirm-icon="fa fa-comment"

Inline positions

You can choose between different positions

Available positions: top left; top; top right; right top; right; right bottom; bottom right; bottom; bottom left; left bottom; left; left top;

API

Usage

Via class

You need to apply .popconfirm-toggle class to button.

Via JavaScript

You need to apply .popconfirm class to button.


                      var popconfirm-elements = document.querySelectorAll('.popconfirm-toggle')
                      popconfirm-elements.forEach(function (current_element) { new
                      mdb.Popconfirm(current_element) })

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-message="", for two word options name use hyphen "-" as data-mdb-ok-text=""

Name	Type	Default	Description
`cancelLabel`	String	`'Cancel'`	Text rendered under cancel button for screen readers
`cancelText`	String	`'Cancel'`	Text of cancel button, if empty string - button doesn't render
`confirmLabel`	String	`'Confirm'`	Text rendered under confirm button for screen readers
`popconfirmIcon`	String	`''`	Icon rendered at start of message
`message`	String	`'Are you sure?'`	Message rendered in popconfirm
`popconfirmMode`	String	`'inline'`	Mode of display -> 'inline' or 'modal'
`okClass`	String	`'btn-primary'`	Class of confirm button
`okText`	String	`'OK'`	Text of confirm button
`position`	String	`''`	Specify position to display popover

Methods

Method	Description
`getInstance`	Static method which allows you to get the popconfirm instance associated with a DOM element
`dispose`	Destroys an element's popconfirm


                        var popconfirm-elements = document.querySelectorAll('.popconfirm-toggle')
                        popconfirm-elements.forEach(function (current_element) { var button = new
                        mdb.Popconfirm(current_element) button.getInstance() })

Events

Name	Description
`cancel.mdb.popconfirm`	This event fires immediately when the popconfirm is closed without confirm button click.
`confirm.mdb.popconfirm`	This event fires immediately when the popconfirm is closed using confirm button.


                        document.addEventListener('cancel.mdb.popconfirm', function(){ //Your code
                        goes here });

Import

Popconfirm also works with module bundlers. Use the following code to import this component:


                        import Popconfirm from './pro/popconfirm';