makeup-confirm-dialog

makeup-confirm-dialog

JavaScript class representing a confirm dialog. No CSS provided.

View Demo.

HTML

The following markup structure and classnames are required. Any SVG icons can be used.

<div
  class="confirm-dialog confirm-dialog--mask-fade"
  role="dialog"
  aria-labelledby="dialog-confirm-title"
  aria-modal="true"
>
  <div class="confirm-dialog__window lightbox-dialog__window--fade">
    <div class="confirm-dialog__header">
      <h2 id="dialog-confirm-title">
        <!-- dialog title -->
      </h2>
    </div>
    <div class="confirm-dialog__main">
      <p id="confirm-dialog-description">Dialog description</p>
    </div>
    <div class="confirm-dialog__footer">
      <button class="btn confirm-dialog__reject">No</button>
      <button class="btn btn--primary confirm-dialog__confirm" aria-describedby="confirm-dialog-description">
        Yes
      </button>
    </div>
  </div>
</div>

CSS

No CSS is provided. However, the class is fully compatible with eBay Skin.

JavaScript

import ConfirmDialog from "makeup-confirm-dialog";

document.querySelectorAll(".confirm-dialog").forEach(function (el, i) {
  const widget = new ConfirmDialog(el, config);
});

Config

The constructor takes a configuration object as its second parameter.

todo

Events

makeup-dialog-open

Fired when any dialog is opened.

makeup-dialog-close

Fired when any dialog is closed.

makeup-dialog-confirm

Fired when the confirm dialog is confirmed.

makeup-dialog-reject

Fired when the confirm dialog is rejected.