Complete reference for the Confirmly Popup library
The ConfirmPopup constructor accepts an options object
with the following properties:
| Option | Type | Default | Description |
|---|---|---|---|
targetElement |
HTMLElement | Required | The element that triggers the popup when clicked |
template |
string | Default template |
Custom HTML template for the popup. Use
{{confirmClass}}, {{cancelClass}},
{{confirmContent}}, and
{{cancelContent}} as placeholders.
|
buttonClasses |
object |
{ confirm: 'confirmly__button
confirmly__button--confirm', cancel: 'confirmly__button
confirmly__button--cancel' }
|
CSS classes for the confirm and cancel buttons |
buttonContents |
object | { confirm: 'Yes', cancel: 'No' } |
Text content for the confirm and cancel buttons |
defaultPlacement |
string | 'top' | Popup placement relative to the target element. Possible values: 'top', 'right', 'bottom', 'left', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end' |
onConfirm |
function | undefined | Callback function to execute when the confirm button is clicked |
onCancel |
function | undefined | Callback function to execute when the cancel button is clicked |
showError |
boolean | true | Whether to show console errors |
The ConfirmPopup instance provides the following
methods:
Attaches the popup to a new target element.
// Create a popup instance
const popup = new ConfirmPopup({
targetElement: document.querySelector('#button1'),
onConfirm: () => console.log('Button 1 confirmed'),
onCancel: () => console.log('Button 1 cancelled'),
});
// Later, attach the same popup to a different button
popup.attach(
document.querySelector('#button2'),
() => console.log('Button 2 confirmed'),
() => console.log('Button 2 cancelled')
);element (HTMLElement): The new target element
onConfirm (function, optional): New confirm
callback
onCancel (function, optional): New cancel callback
Cleans up and removes the popup from the DOM. Call this method when you no longer need the popup to prevent memory leaks.
// Create a popup instance
const popup = new ConfirmPopup({
targetElement: document.querySelector('#myButton'),
onConfirm: () => console.log('Confirmed'),
onCancel: () => console.log('Cancelled'),
});
// Later, when you don't need the popup anymore
popup.destroy();Confirmly Popup uses CSS variables for styling. You can override these variables to customize the appearance:
| Variable | Default Value | Description |
|---|---|---|
--confirmly-bg-color |
#ffffff | Background color of the popup |
--confirmly-text-color |
#374151 | Text color in the popup |
--confirmly-border-color |
#e5e7eb | Border color of the popup |
--confirmly-shadow-color |
rgba(0, 0, 0, 0.1) | Shadow color of the popup |
| Variable | Default Value | Description |
|---|---|---|
--confirmly-primary-bg |
#3b82f6 | Background color of the confirm button |
--confirmly-primary-hover |
#2563eb | Hover background color of the confirm button |
--confirmly-primary-text |
#ffffff | Text color of the confirm button |
--confirmly-secondary-bg |
#e5e7eb | Background color of the cancel button |
--confirmly-secondary-hover |
#d1d5db | Hover background color of the cancel button |
--confirmly-secondary-text |
#374151 | Text color of the cancel button |
| Variable | Default Value | Description |
|---|---|---|
--confirmly-spacing-xs |
0.25rem | Extra small spacing value |
--confirmly-spacing-sm |
0.5rem | Small spacing value |
--confirmly-spacing-md |
1rem | Medium spacing value |
--confirmly-spacing-lg |
1.5rem | Large spacing value |
| Variable | Default Value | Description |
|---|---|---|
--confirmly-font-sm |
0.875rem | Small font size |
--confirmly-font-md |
1rem | Medium font size |
--confirmly-radius-sm |
0.25rem | Small border radius |
--confirmly-radius-md |
0.375rem | Medium border radius |
| Variable | Default Value | Description |
|---|---|---|
--confirmly-transition |
200ms ease-in-out | Default transition timing |
--confirmly-z-index |
9999 | Z-index for the popup |
Confirmly Popup comes with several built-in themes that you can use by adding the appropriate CSS class to your popup template:
| Theme | CSS Class | Description |
|---|---|---|
| Default | confirmly__popup |
The standard theme with blue confirm button |
| Success |
confirmly__popup confirmly__popup--success
|
Green theme for successful operations |
| Warning |
confirmly__popup confirmly__popup--warning
|
Red theme for dangerous actions |
| Info | confirmly__popup confirmly__popup--info |
Blue theme for informational messages |
| Dark | confirmly__popup confirmly__popup--dark |
Dark mode theme with light text |
| Material |
confirmly__popup confirmly__popup--material
|
Material Design inspired theme |
| Bootstrap |
confirmly__popup confirmly__popup--bootstrap
|
Bootstrap-style theme |
| Rounded |
confirmly__popup confirmly__popup--rounded
|
Extra rounded corners styling |
When creating a custom template, you need to follow this structure to ensure the popup works correctly:
<div class="confirmly__popup">
<div class="confirmly__content">
<p class="confirmly__message">Your message here</p>
<div class="confirmly__buttons">
<button data-button="cancel" class="{{cancelClass}}">{{cancelContent}}</button>
<button data-button="confirm" class="{{confirmClass}}">{{confirmContent}}</button>
</div>
</div>
<div class="confirmly__arrow" data-popper-arrow></div>
</div>Important elements:
data-button="confirm" and
data-button="cancel" attributes are required for
button functionality
data-popper-arrow element is required for the
arrow to work correctly
{{confirmClass}},
{{cancelClass}}, {{confirmContent}},
and {{cancelContent}} will be replaced with the
values from your options
Confirmly Popup supports all modern browsers: