Confirmly Popup Examples

Explore all the features and customization options

Theme Examples

Default Theme

The standard styling for the popup

Success Theme

Green styling for success actions

Warning Theme

Red styling for dangerous actions

Info Theme

Blue styling for informational popups

Dark Theme

Dark mode styling for the popup

Material Design

Material design inspired styling

Bootstrap Style

Bootstrap inspired styling

Rounded Style

Extra rounded corners styling

Placement Examples

Top Placement

Popup appears above the button

Right Placement

Popup appears to the right

Bottom Placement

Popup appears below the button

Left Placement

Popup appears to the left

Custom Examples

Custom Button Text

Customize the button labels

Custom Template

Fully customized popup with HTML

Code Examples

Basic Usage

import { ConfirmPopup } from 'confirmly-popup';

const popup = new ConfirmPopup({
  targetElement: document.querySelector('#myButton'),
  onConfirm: () => {
    console.log('Confirmed!');
  },
  onCancel: () => {
    console.log('Cancelled!');
  },
});

Advanced Usage

const popup = new ConfirmPopup({
  targetElement: document.querySelector('#myButton'),
  template: `
    <div class="confirmly__popup confirmly__popup--custom">
      <div class="confirmly__content">
        <p class="confirmly__message">Are you really sure?</p>
        <div class="confirmly__buttons">
          <button data-button="confirm">Yes, proceed</button>
          <button data-button="cancel">No, go back</button>
        </div>
      </div>
      <div class="confirmly__arrow" data-popper-arrow></div>
    </div>
  `,
  buttonClasses: {
    confirm: 'btn btn-primary',
    cancel: 'btn btn-secondary',
  },
  buttonContents: {
    confirm: 'Yes, proceed',
    cancel: 'No, go back',
  },
  defaultPlacement: 'top',
  showError: true,
  onConfirm: () => {
    console.log('Action confirmed');
  },
  onCancel: () => {
    console.log('Action cancelled');
  },
});